在Meteor集合加载期间显示加载器

Question

我有一个名为 task_list 的模板，它长这样：

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

Template.task_list.tasks 返回一个集合，在用户界面中似乎需要一些时间才能加载完毕。

在集合加载过程中，我想显示一个加载指示器。

有没有什么想法可以实现这个功能？

顺便说一下，我尝试了模板中的rendered事件，但它在列表实际加载之前被触发。我还尝试在task模板上使用rendered，但好像从未被调用。

- Gezim

---

我在想如何最好地解决显示Meteor集合之前的延迟问题？的相同问题。 - Dan Dascalescu

Answer 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>

这比整个页面使用通用的加载模板更好，因为加载部分仅限于实际具有新数据的页面部分。

---

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}}

< p > 更新：使用iron-router，您可以直接指定一个loading模板，在订阅加载时显示。

- Dan Dascalescu

---

谢谢，丹。这个非常准确。 - Gezim

这个函数没问题，但当所有订阅都准备好时，你如何进行回调？ - malhal

相关问题：我想在我的导航栏中除了iron-router风格的主页面加载器之外，还要有一个迷你加载器。是否有一种方法可以在我的“header”模板中检查页面上剩余的模板是否已准备好？我只能想到如何等待实际上加载非常快的那个包含加载器的模板。我尝试使用绝对定位CSS将我的迷你加载器从iron-router加载器中“放置”到导航栏中，但在某些页面和转换中会出现问题。将其实际放在我的头文件中是理想的。 - evolross

如果我使用iron:router订阅，应该怎么做呢？我在多个路由上重复使用组件，而每个路由加载不同的数据。因此，在路由器中订阅对于我的用例是有意义的。 - Laran Evans

Answer 2

Dan的回答确实很到位，但我想提醒大家，我认为必须删除autopublish包才能使其真正起作用。

meteor remove autopublish

此外，我建议使用 spin包 来获取一个漂亮的旋转加载图标。

- Cagdas Can

Answer 3

这段时间推出了一些不错的软件包。看看这两个：

1. Spin - 显示旋转轮。配合Iron Router，您可以指定一个加载模板来显示旋转轮。
2. Iron Router Progress - 在页面顶部显示进度条（类似Youtube风格）

它们都可以直接使用，如果需要更高级的选项，请查看它们的文档。

- Jan Klimo

---

这些包确实很方便。同时，Meteor发布了v1.0.4版本，引入了模板级别的订阅和Template.subscriptionsReady助手。更多详情请参见我的回答。 - Dan Dascalescu