如何强制 Meteor 立即重新渲染，或优先反应更新？

Question

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

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

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

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

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

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

Answer 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();
});

P.S。在渲染 Entries 模板

之前，您可能需要检查条目是否已加载

如何强制 Meteor 立即重新渲染，或优先反应更新？

How to force Meteor to rerender immediately, or prioritize reactive update?

reactive-programming

meteor

meteor-blaze