我无法弄清楚 Meteor {{#isolate}} 到底是什么。有没有例子？答案

【问题标题】：I can't figure out what exactly Meteor {{#isolate}} is. Are there any examples?我无法弄清楚 Meteor {{#isolate}} 到底是什么。有没有例子？
【发布时间】：2012-10-31 09:51:45
【问题描述】：

如何使用 {{#isolate}} ？

如果我用一堆模板制作一个页面，例如：

{{> 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>

如果每个模板都有更新的内容，它会每次都重新呈现整个页面吗？我该如何阻止这种情况发生？

在这种情况下我应该使用isolate吗？

如果我将任何帮助程序绑定到这些模板，例如：

Template.template1.rendered = ->
    console.log 'rendered at: ' + new Date().getTime()

它至少会渲染 5 次，因为我有 5 个反应源。如果它们中的每一个都包含一个反应列表，它将被渲染 docs.length 次。

我无法控制单个模板实例。

对不起我的英语。

这是我之前在 GitHub 上发布的一个与此相关的问题：https://github.com/meteor/meteor/issues/435

【问题讨论】：

标签： meteor

【解决方案1】：

if each single template has content update it will rerender the whole page ?

不，但它的所有父母的渲染事件都会被触发！实际上，渲染事件像 dom 事件一样传播。并且当特定模板中的响应式数据发生更改时，其内容及其所有子模板将被重新渲染！但不是他的父母！那么“恒定”和“孤立”是做什么的呢？我认为弄清楚它们的最好方法是做一些测试。这是一个简单的测试： 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 的控制台更改会话数据，看看会发生什么。注意这些input中输入的文本在reactive发生变化时是否会被清除（意味着重新渲染）以及是否触发了渲染事件。

……对不起我的英语也很抱歉^_^

【讨论】：

Template.foo.rendered 回调被调用，但实际上并没有被重新渲染，这让我陷入了循环。显然，Meteor 的人已经意识到了这个令人困惑的术语，并且它已在新的 UI 引擎中得到修复。见github.com/meteor/meteor/issues/1294
#isolate、#constant 和 preserve 已全部删除：github.com/meteor/meteor/wiki/…