3

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

4

1 に答える 1

6 
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 のコンソールを使用してセッション データを変更し、何が起こるかを確認してください。リアクティブが変更されたときに、これらの入力に入力されたテキストがクリアされる (つまり、再レンダリングされる) かどうか、およびレンダリングされたイベントがトリガーされるかどうかに注意してください。

……私の英語もすみません^_^

于 2012-11-03T10:25:20.513 に答える