我无法弄清楚流星{{#isolate}}到底是什么.有什么例子吗? [英] I can't figure out what exactly Meteor {{#isolate}} is. Are there any examples?
问题描述
如何使用{{#isolate}}?
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?
在这种情况下我应该使用isolate吗?
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()
它将渲染至少5次，因为我有5个反应源.如果它们每个都包含一个 反应性列表，它将呈现docs.length次.
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.
对不起，我的英语.
这是我之前在GitHub上发布的与此相关的问题: https://github.com/meteor/meteor/issues/435
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 ?
否，但将触发其所有父母渲染的事件！实际上，渲染事件像dom事件一样传播. 并且，当更改特定模板中的反应性数据时，其及其所有子模板的内容将重新呈现！但不是他的父母！ 那么常量"和孤立"是做什么的呢?我认为找出它们的最佳方法是进行测试. 这是一个简单的测试: html:
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());
};
}
使用chrome/firebug控制台更改会话数据，看看会发生什么.注意在更改反应式时是否会清除在这些输入中输入的文本(意味着将重新渲染)，以及是否触发了渲染事件.
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^_^
这篇关于我无法弄清楚流星{{#isolate}}到底是什么.有什么例子吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
