Template is re-rendered even though there is no data change
I'm struggling with an issue that I will explain giving a simple demo.
There's following very simple document in People Collection.
{
"_id" : "vxmLRndHgNocZouJg",
"fname" : "John" ,
"nicks" : [ "Johnny" , "Jo"]
}
Now let's consider following templates. Basically I display username and a
list of nicknames with input field for adding more nicknames.
<head>
<title>test</title>
</head>
<body>
<br/>
</body>
<template name="name">
<input type="text" value="{{fname}}"/>
</template>
<template name="nicks">
<div>
no nicks yet
{{/each}}
<input type="text" name="nicks"/>
<input type="submit"/>
</template>
My client javascript code is as follows:
Template.name.fname = function() {
return People.findOne({"fname" : "John"},{
transform : function(doc) {
return doc.fname;
}
});
}
Template.name.rendered = function() {
console.log('Template "name" rendered!');
}
Template.nicks.nicks = function() {
var john = People.findOne({"fname" : "John"});
if(john) return john.nicks;
}
Template.nicks.events({
'click input[type="submit"]' : function () {
var johnId = People.findOne({"fname" : "John"})._id; // demo code
People.update(johnId,{
$addToSet : {
nicks : $('input[name="nicks"]').val()
}
})
}
});
My problem is that after adding nickname (update of nicks field in a
document) template name is re-rendered (I know because I console.log it).
When I query People collection to provide data for name template I use
transform option so changes in nicks field shouldn't have impact on name
template.
Meteor docs supports this:
Cursors are a reactive data source. The first time you retrieve a cursor's
documents with fetch, map, or forEach inside a reactive computation (eg, a
template or autorun), Meteor will register a dependency on the underlying
data. Any change to the collection that changes the documents in a cursor
will trigger a recomputation.
Why template name is re-rendered then?
No comments:
Post a Comment