添加加载指示符或微调器以呈现延迟（不适用于订阅）

Question

我的meteor app模板在创建和渲染之间延迟了1秒。延迟是在数据订阅可用之后，因此看起来1秒是Blaze在本地读取数据并绘制DOM中的所有对象所需的时间（可能大多数都在缓存中）。

问题是：有一种方法可以在加载的模板中添加一个微调器来覆盖myTemplate.OnCreated和myTemplate.onRendered之间的延迟吗？

提前致谢。

Answer 1

有几种方法可以实现您的目标，而且如果没有看到更多代码，就很难为您的案例选择正确的方法。

但是，如果您的订阅准备就绪后未在模板定义中执行任何特定逻辑，那么您可以使用Blaze Template.subscriptionsReady帮助程序。

<template name="notifications">
  {{#if Template.subscriptionsReady}}
    <!-- put your view code here -->
  {{else}}
    <!-- put loading indicator here -->
  {{/if}}
</template>

如果您的订阅准备就绪后，您正在对数据执行某些特殊操作，或者您需要等到所有数据都已完全加载，那么您可以控制模板何时使用ReactiveVar进行渲染。

模板定义：

<template name="notifications">
  {{#if isReady }}
    <!-- put your view code here -->
  {{else}}
    <!-- put loading indicator here -->
  {{/if}}
</template>

模板逻辑：

Template.notifications.onCreated(function() {
  this.isReady = new ReactiveVar(false);
});

Template.notifications.onRendered(function() {
  this.subscribe('activeNotifications', () => {
    this.isReady.set(true);
  });
});

Template.notifications.helpers({
  isReady: function() {
    return Template.instance().isReady.get();
  },
});

我通常在自己的模板中实现我的加载指示器逻辑，以便我可以在整个网站上重复使用它。

Answer 2

解决方案在逻辑上与@jordanwillis解决方案非常相似，只是需要在创建的模板上添加超时：

<template name="contactList">
   {{#if contactListRendered }}
      <!-- Here show the contact list -->
   {{else}}
      <!-- show loading indicator or spinner  -->
   {{/if}}
</template>

逻辑：

Template.contactList.onCreated( function() {
   Session.set("contactListRendered", false);
});

Template.contactList.onRendered( function() {
   setTimeout(function(){Session.set("contactListRendered", true);}, 1);
});

Template.contactList.helpers({
   contactListRendered: function() {
   return Session.get("contactListRendered");
}});