I can't figure out what exactly Meteor {{#isolate}} is. Are there any examples?
How do I use {{#isolate}} ?
If I make a page with a bunch of templates, like:
{{> page1}}
reactive source1<
-
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^_^
讨论(0)
加载中...
- 热议问题