Home/ Questions/Q 8771905
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T17:54:28+00:00

How do I use {{#isolate}} ? If I make a page with a bunch

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    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^_^

    • 0