我无法弄清楚 Meteor {{#isolate}} 到底是什么.有没有例子? [英] I can't figure out what exactly Meteor {{#isolate}} is. Are there any examples?

查看：12
本文介绍了我无法弄清楚 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 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

解决方案 

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}} 到底是什么.有没有例子?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆