Meteor Blaze：在渲染父级之前不要等待子模板渲染答案

【问题标题】：Meteor Blaze : dont wait for child template rendering before rendering parentMeteor Blaze：在渲染父级之前不要等待子模板渲染
【发布时间】：2017-11-16 12:04:31
【问题描述】：

与 Blaze 一起玩我意识到以下几点：如果我有一个父模板，其中我包含一个带有{{> child_template }}的子模板@

然后 Blaze 将在渲染父模板之前等待子模板被渲染。这在某些情况下可能很好，但不是全部。

例如，如果我的父模板包含 <h1>Welcome to my page</h1>，子模板包含 10 000 个项目的列表。我想尽快显示<h1> 并等待10 000 个项目稍后出现

我目前正在做的管理如下：

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

它正在工作，但我想知道是否有人对这个似乎很常见的问题有更好的解决方案。谢谢

【问题讨论】：

您可以将自定义布尔参数canRender 传递给默认为false 的子组件，但父组件的onRendered 将其设置为true。并且子组件应该检查这个参数并且不渲染任何东西，除非它是true。
@aedm 这是一个答案，不是评论。
@aedm 谢谢，据我了解，这实际上似乎是一种通用架构
@aedm 是否愿意发表您的评论作为回复以便我接受？

标签： asynchronous meteor meteor-blaze

【解决方案1】：

您可以将自定义布尔参数传递给默认为 false 的子组件，但父组件的 onRendered 将其设置为 true。并且子组件应该检查这个参数并且不渲染任何东西，除非它是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");
  }
});

将状态传递给子组件：

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

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

【讨论】：

【解决方案2】：

正如您所说，您的子模板有一个包含 10000 个项目的列表。所以，这意味着你已经订阅了一些收藏。您可以使用下面的代码来解决您的问题。

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

【讨论】：

实际上，10 000 个项目的列表可以来自订阅，也可以不是。但是谢谢