如何强制 Meteor 立即重新渲染，或优先考虑响应式更新？答案

【问题标题】：How to force Meteor to rerender immediately, or prioritize reactive update?如何强制 Meteor 立即重新渲染，或优先考虑响应式更新？
【发布时间】：2016-03-31 08:16:18
【问题描述】：

我正在尝试构建自己的加载微调器，我设置它的方式是使用一个帮助器来检查条目数组是否为空。

{{#if viewThisPage}}
  {{#if noEntriesLoaded}}
    <div class="loadingSpinner">...</div>
  {{/if}}
  {{#each entry}}
    {{ > myTemplate}}
  {{/each}}
{{/if}}

最初 viewThisPage 是假的。当 viewThisPage 设置为 true 时，我会在 mongoDB 中查询条目。我从基准测试中看到的问题是查询进行得如此之快，以至于所有 DOM 更新事件都被挤压在一起，因此微调器永远不会被渲染，换句话说，noEntriesLoaded 在太短的时间内为真。

但是，在触发 viewThisPage 和实际呈现页面之间存在大约 1200 毫秒的延迟。我希望在这段延迟期间显示微调器。

我想到了三种方法来解决这个问题

设置 viewThisPage 后，当条目尚未加载时，以某种方式强制流星立即重新呈现该部分。
以某种方式优先考虑对 viewThisPage 的反应性响应，以便在加载整体之前更新。
在添加条目的块上使用 setTimeout() 添加假滞后。这行得通，我可以看到我漂亮的加载微调器，但这是有史以来最愚蠢的想法。

【问题讨论】：

标签： meteor reactive-programming meteor-blaze

【解决方案1】：

您可以在呈现条目时显示微调器。

只有在所有条目都被渲染时，这段代码才会隐藏 loadingSpinner：

meteor add reactive-var

<template name="Main">
  {{#if viewThisPage}}
    {{#if entriesAreNotReady}}
      <div class="loadingSpinner">...</div>
    {{/if}}
    {{> Entries entry=entry onRendered=onEntriesRendered}}
  {{/if}}
</template>

<template name="Entries">
  {{#each entry}}
    {{> myTemplate}}
  {{/each}}
</template>

Template.Main.onCreated(function() {
  this.areEntriesRendered = new ReactiveVar(false);
});

Template.Main.helpers({
  onEntriesRendered: function() {
    var areEntriesRendered = Template.instance().areEntriesRendered;

    return function() {
      areEntriesRendered.set(true);
    };
  },

  entriesAreNotReady: function() {
    return ! Template.instance().areEntriesRendered.get();
  }
});

Template.Entries.onRendered(function() {
  this.data.onRendered();
});

附：可能您需要在渲染 Entries 模板之前检查条目是否已加载

【讨论】：