if each single template has content update it will rerender the whole page ?
No, but all its parents' rendered event will be triggered! Actually, rendered event propagate like dom events.
And when reactive data in a specific template is changed, the content of its and all its sub templates will be re-rendered! But not his parents!
Then what "constant" and "isolate" do? I think the best way to figure them out is to do some test.
Here is a simple test:
html:
<head>
<title>meteor_test</title>
</head>
<body>
{{> main}}
</body>
<template name="main">
This is main template!
{{> subA}}
{{> subB}}
</template>
<template name="subA">
<div>
----This is subA! Input is surrounded by "constant"!
{{#constant}} <input /> {{/constant}}
Reactive data: {{reactiveData}}
{{> subA_A}}
</div>
</template>
<template name="subA_A">
<div>
--------This is subA_A!
<input type="text" />
Reactive data: {{reactiveData}}
</div>
</template>
<template name="subB">
<div>
----This is subB! Reactive data is surrounded by "isolate"!
<input type="text" />
Reactive data: {{#isolate}} {{reactiveData}} {{/isolate}}
{{> subB_A}}
</div>
</template>
<template name="subB_A">
<div>
--------This is subB_A!
<input type="text" />
Reactive data: {{reactiveData}}
{{> subB_A_A}}
</div>
</template>
<template name="subB_A_A">
<div>
------------This is subB_A_A!
<input type="text" />
Reactive data: {{reactiveData}}
</div>
</template>
js:
if (Meteor.isClient) {
Template.main.rendered = function () {
console.log('main is rendered at %s', new Date());
};
Template.subA.helpers({
reactiveData: function () {
return Session.get('subA');
}
});
Template.subA.rendered = function () {
console.log('subA is rendered at %s', new Date());
};
Template.subB.helpers({
reactiveData: function () {
return Session.get('subB');
}
});
Template.subB.rendered = function () {
console.log('subB is rendered at %s', new Date());
};
Template.subA_A.helpers({
reactiveData: function () {
return Session.get('subA_A');
}
});
Template.subA_A.rendered = function () {
console.log('subA_A is rendered at %s', new Date());
};
Template.subB_A.helpers({
reactiveData: function () {
return Session.get('subB_A');
}
});
Template.subB_A.rendered = function () {
console.log('subB_A is rendered at %s', new Date());
};
Template.subB_A_A.helpers({
reactiveData: function () {
return Session.get('subB_A_A');
}
});
Template.subB_A_A.rendered = function () {
console.log('subB_A_A is rendered at %s', new Date());
};
}
Use chrome's/firebug's console to change the session data, see what will happen. Pay attention to whether the text entered in these inputs will be cleared(means been re-rendered) when reactive changed and whether the rendered event is triggered.
……sorry about my English, too^_^
