为渲染延迟添加加载指示器或微调器（不适用于订阅）

Question

我的流星应用程序模板在创建和渲染之间有 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");
}});

为渲染延迟添加加载指示器或微调器（不适用于订阅）

Add a loading indicator or spinner for rendering delay (Not for subscription ready)

javascript

meteor

meteor-blaze