CODEWITHSUNDEEP
asynchronousmeteormeteor-blaze
fadomire
fadomire

Reputation: 1975

Meteor Blaze : dont wait for child template rendering before rendering parent

playing with Blaze i realized the following : if i have a parent template where i include a child template with {{> child_template }}

then Blaze will wait for child template to be rendered before rendering parent. This can be good in some cases but not all.

For e.g if my parent template contains a <h1>Welcome to my page</h1> and child a list of 10 000 items. I would like a way to display <h1> asap and wait for the 10 000 items to appear later

what i'm doing currently to manage that is the following :

Template.parent.onRendered(function(){
    Blaze.render(Template.child, document.body);
});

it is working but i wonder if anyone have a better solution for this problem that seems pretty common. thanks

Upvotes: 0

Views: 333

Answers (2)

aedm
aedm

Reputation: 6584

You could pass a custom boolean argument to the child component that's false by default, but the parent component's onRendered sets it true. And the child component should check this argument and not render anything unless it's true.

Template.parent.onCreated(function() {
  this.state = new ReactiveDict();
  this.state.setDefault({
    "canRender": false,
  });
}

Template.parent.onRendered(function() {
  this.state.set("canRender", true);
}

Template.parent.helpers({
  canRender() {
    return Template.instance().state.get("canRender");
  }
});

Pass the state to the child component:

<template name="parent">
  {{>child canRender=canRender}}
</template>

<template name="child">
  {{#if canRender}}
    <p>Millions of items go here.</p>
  {{/if}}
</template>

Upvotes: 1

Ankur Soni
Ankur Soni

Reputation: 6018

As you say, your Child Template has a list of 10000 items. so, this means you have subscribed to some collection. You can us below code to solve your issue. 

<template name="Parent">
    <div>
        <h1>Welcome to my page</h1>
    </div>
  {{#if Template.subscriptionsReady}}
    {{> Child}}
  {{else}}
  <p>Loading Child Items...</p>
  {{/if}}
</template>

Upvotes: 0

Related Questions