
本文介绍了我无法弄清楚 Meteor {{#isolate}} 到底是什么.有没有例子?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何使用 {{#isolate}} ?
如果我用一堆模板制作一个页面,比如:
{{>第1页}}<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><模板名称=page1">{{>模板1}}{{>模板2}}{{>模板3}}{{>模板4}}{{>模板5}}
如果每个模板都有更新的内容,它会每次都重新渲染整个页面吗?我如何阻止这种情况发生?
在这种情况下我应该使用 isolate
吗?
如果我将任何帮助程序绑定到这些模板,例如:
Template.template1.rendered = ->console.log '渲染于:' + new Date().getTime()
它至少会渲染 5 次,因为我有 5 个反应源.如果它们中的每一个都包含一个反应列表,它将被呈现 docs.length 次.
我无法控制单个模板实例.
对不起我的英语.
这是我之前在 GitHub 上发布的与此相关的问题:https://github.com/meteor/meteor/issues/435
解决方案
如果每个模板都有内容更新,它会重新渲染整个页面吗?
不会,但是会触发它所有父级渲染的事件!实际上,渲染事件像 dom 事件一样传播.当特定模板中的反应数据发生变化时,其及其所有子模板的内容将被重新渲染!但不是他的父母!那么常量"和隔离"是做什么的呢?我认为弄清楚它们的最好方法是做一些测试.这是一个简单的测试:html:
<title>meteor_test</title><身体>{{>主要的}}<模板名称="main">这是主模板!{{>子A}}{{>子B}}<模板名称=subA"><div>----这是subA!输入被常量"包围!{{#constant}} {{/持续的}}反应数据:{{reactiveData}}{{>subA_A}}
<模板名称="subA_A"><div>--------这是subA_A!<input type="text"/>反应数据:{{reactiveData}}
<模板名称=subB"><div>----这是subB!反应式数据被隔离"包围!<input type="text"/>反应性数据:{{#isolate}} {{reactiveData}} {{/isolate}}{{>子B_A}}
<模板名称="subB_A"><div>--------这是subB_A!<input type="text"/>反应数据:{{reactiveData}}{{>subB_A_A}}
<模板名称="subB_A_A"><div>------------这是subB_A_A!<input type="text"/>反应数据:{{reactiveData}}
js:
if (Meteor.isClient) {Template.main.rendered = function () {console.log('main 呈现在 %s', new Date());};Template.subA.helpers({反应数据:函数(){返回 Session.get('subA');}});Template.subA.rendered = function () {console.log('subA 呈现在 %s', new Date());};Template.subB.helpers({反应数据:函数(){返回 Session.get('subB');}});Template.subB.rendered = function () {console.log('subB 呈现在 %s', new Date());};Template.subA_A.helpers({反应数据:函数(){返回 Session.get('subA_A');}});Template.subA_A.rendered = function () {console.log('subA_A 呈现在 %s', new Date());};Template.subB_A.helpers({反应数据:函数(){返回 Session.get('subB_A');}});Template.subB_A.rendered = function () {console.log('subB_A 呈现在 %s', new Date());};Template.subB_A_A.helpers({反应数据:函数(){return Session.get('subB_A_A');}});Template.subB_A_A.rendered = function () {console.log('subB_A_A 呈现在 %s', new Date());};}
使用 chrome 的/firebug 的控制台更改会话数据,看看会发生什么.注意这些input里输入的文本在reactive改变时是否会被清除(意味着被重新渲染)以及渲染的事件是否被触发.
……对不起,我的英语也太糟糕了^_^
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 areactive 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
解决方案
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^_^
这篇关于我无法弄清楚 Meteor {{#isolate}} 到底是什么.有没有例子?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!