Menu
How do I use {{#isolate}} ?
If I make a page with a bunch of templates, like:
{{> page1}}
<template name="template1">reactive source1</template>
<template name="template2">reactive source2</template>
<template name="template3">reactive source3</template>
<template name="template4">reactive source4</template>
<template name="template5">reactive source5</template>
<template name="page1">
{{> template1}}
{{> template2}}
{{> template3}}
{{> template4}}
{{> template5}}
</template>
If each single template has content that updates, will it rerender the whole page each time? How do i stop that from happening?
Should I use isolate in this situation?
If I bind any helper to these templates, like:
Template.template1.rendered = ->
console.log 'rendered at: ' + new Date().getTime()
it will render at least 5 times because I have 5 reactive sources. If each of them includes a reactive list, it will be rendered docs.length times.
I can't control single template instances.
Sorry about my english.
Here is an issue related to this that I've posted on GitHub before: https://github.com/meteor/meteor/issues/435
530
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^_^
190
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
