在加载所有 Meteor 模板加载结束时运行 Javascript答案

【问题标题】：Running Javascript at end of loading all Meteor templates load在加载所有 Meteor 模板加载结束时运行 Javascript
【发布时间】：2017-07-30 17:20:24
【问题描述】：

我有以下模板代码：

<template name="dashboard">
  <div class="content-container-with-sidebar clearfix">
    <div class="dashboard-container">
    {{#if Template.subscriptionsReady}}
      <div id=masonry-grid class="masonry-grid clearfix">
        {{> timePieChartCard}}
        {{> expensePieChartCard}}
        {{> HighlightsCard}}
        {{> initializeMasonry}}
      </div>
    {{/if}}
    </div>
  </div>
</template>

我想在所有模板及其订阅/帮助程序加载到主仪表板模板中之后运行 masonry 库的初始化程序。

每张卡都有类似这样的代码：

<template name="HighlightsCard">
  {{#if highlightsExist}}
  <div class="col-md-6 masonry-grid-item">
    <div class="card highlights-card">
    </div>
  </div>
  {{/if}}
</template>

Template.highlightsCard.onCreated(function() {
  this.autorun(() => {
    this.subscribe('userOwnClientHighlightsData');
  });
});

Template.highlightsCard.helpers({
  highlights() {
    return Highlights.find({}, {
      limit: 4,
      sort: {createdAt: -1}
    }).fetch();
  },
  highlightsExist() {
    return (Highlights.find().count() > 0);
  }
});

我目前正在设置一个会话，当每个 onRendered 在卡片模板中运行时，会话会增加，但是一旦它们全部渲染，它们的内容仍然没有加载。我需要类 masonry-grid-item 可见，以便我初始化砌体。

获得与 jquery 的 $(document).ready() 类似结果的最佳方法是什么？

更新：仪表板模板中的每张卡片都有自己对不同数据集的订阅。

【问题讨论】：

标签： javascript templates meteor

【解决方案1】：

如果我对问题的理解正确，您希望在订阅完成并呈现所有子模板（也取决于订阅数据）之后初始化您的组件。

由于我不知道你的 JavaScript 是什么样的，这里有一个你可以尝试的例子。

Template.dashboard.onRendered(function() {
  this.isReady = new ReactiveVar(false);

  this.subscribe('subscriptionName', () => {
    this.isReady.set(true);
    Tracker.afterFlush(() => {
      // Initialize component here
    });
  });
});

Template.dashboard.helpers({
  isReady: () => {
    return Template.instance().isReady.get();
  },
});

然后在您的模板中使用isReady ReactiveVar。在这种情况下，isReady 可能不是必需的（例如，您可能会使用 Template.subscriptionsReady 助手），但我喜欢明确控制何时渲染，以防我的逻辑在未来变得更加复杂。请注意，我删除了{{> initializeMasonry}}，因为它看起来像是您试图通过帮助程序初始化您的组件。

<template name="dashboard">
  <div class="content-container-with-sidebar clearfix">
    <div class="dashboard-container">
    {{#if isReady}}
      <div id=masonry-grid class="masonry-grid clearfix">
        {{> timePieChartCard}}
        {{> expensePieChartCard}}
        {{> HighlightsCard}}
      </div>
    {{/if}}
    </div>
  </div>
</template>

Tracker.afterFlush 的回调将在下一个 Blaze 渲染周期执行，这将在您的子模板渲染之后。

【讨论】：

我忘了提到每张卡都有自己的订阅和帮助检查数据是否可用。我已经更新了上面的原始帖子。

【解决方案2】：

看Tracker.afterFlush

安排在下一次刷新期间调用的函数

例如：

Template.dashboard.onRendered(()=>{
  Tracker.afterFlush(()=>{
    ...your code here
  });
});

【讨论】：