在流星收集加载时显示加载器答案

【问题标题】：Displaying loader while meteor collection loads在流星收集加载时显示加载器
【发布时间】：2012-10-04 11:46:34
【问题描述】：

我有一个模板，task_list，看起来像这样：

{{#each tasks}}
    {{> task}}
{{/each}}

Template.task_list.tasks 返回一个集合，在 ui 中，加载似乎需要一些时间。

在加载集合时，我想显示一个加载指示器。

关于我如何能够做到这一点的任何想法？

顺便说一句，我确实在 task_list 模板上尝试了模板的 rendered 事件，但是它在实际加载列表之前被触发。我还尝试在task 模板上使用rendered，但它似乎永远不会被调用。

【问题讨论】：

我在How can the delay before displaying meteor collections be best addressed?想知道同样的问题

标签： javascript collections meteor

【解决方案1】：

Meteor 1.0.4 更新：现在template-level subscriptions 可用，并且是使用 Iron:router 或独立订阅的首选模式，

有一个补充函数 Template.instance().subscriptionsReady() 当所有使用 this.subscribe 调用的订阅都准备好时返回 true。

在模板的 HTML 中，您可以使用内置帮助程序 Template.subscriptionsReady，这是一种简单的模式，可以在模板依赖于从订阅加载的数据时在模板中显示加载指示器。

例子：

Template.notifications.onCreated(function () {
  // Use this.subscribe inside onCreated callback
  this.subscribe("notifications");
});
<template name="notifications">
  {{#if Template.subscriptionsReady}}
    <!-- This is displayed when all data is ready. -->
    {{#each notifications}}
      {{> notification}}
    {{/each}}
  {{else}}
    Loading...
  {{/if}}
</template>

这比为整个页面使用通用加载模板要好，因为加载部分已本地化为页面中实际包含新数据的部分。

Pre-Meteor 1.0.4：

这个想法是将一个 onReady 函数传递给Meteor.subscribe：

Meteor.subscribe('tasks', function onReady() {
  Session.set('tasksLoaded', true);
});

然后，使您的模板依赖于tasksLoaded 会话变量。在客户端 JavaScript 中：

Template.task_list.helpers({
  tasksLoaded: function () {
    return Session.get('tasksLoaded');
  }
});

在您的模板中：

<template name="task_list">
  {{#if tasksLoaded}}
    {{#each tasks}}
      {{> task}}
    {{/each}}
  {{else}}
    <img src="http://viewvc.svn.mozilla.org/vc/addons/trunk/bandwagon/skin/images/spinner.gif?revision=18591&view=co&pathrev=18591">
  {{/if}}

更新：使用iron-router，您可以直接选择指定loading 模板，该模板将在订阅加载时显示。

【讨论】：

谢谢，丹。这是正确的。
这个功能很好，但是当所有订阅都准备好后如何进行回调？
相关问题：除了正在加载的主页上的iron-router 样式加载器外，我还想在我的导航栏中添加一个迷你加载器。我的header 模板中有没有办法以某种方式检查页面上我的模板的 rest 是否已准备就绪？我能想出的只是如何等待加载器实际所在的 that 模板——加载速度非常快。我尝试使用绝对定位 CSS 将我的迷你加载器从我的 iron-router 加载器“放入”导航栏中，但它在某些页面和过渡上变得混乱。将它实际放在我的标题中将是理想的。
如果我通过 Iron:router 使用订阅，该怎么做？我在多条路线上重复使用组件，而每条路线都加载不同的数据。因此，在我的用例中订阅路由器对我来说很有意义。

【解决方案2】：

同时发布了一些不错的软件包。看看这两个：

Spin - 显示一个纺车。使用 Iron Router，您可以指定显示旋转轮的加载模板。
Iron Router Progress - 在页面顶部显示进度条（Youtube 风格）

它们都开箱即用，查看他们的文档以了解更多高级选项。

【讨论】：

这些包确实派上用场了。与此同时，Meteor 发布了 v1.0.4，它引入了模板级订阅和 Template.subscriptionsReady 助手。有关详细信息，请参阅my answer。

【解决方案3】：

Dan's 的回答肯定是正确的，但我想提醒一下，我相信 autopublish 包必须被删除才能真正起作用。

meteor remove autopublish

另外，我推荐spin package 一个漂亮的微调器。

【讨论】：