javascript - 在 meteor 收集加载时显示加载器

Question

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

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

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

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

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

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

Answer 1

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

There is a complementary function Template.instance().subscriptionsReady() which returns true when all of the subscriptions called with this.subscribe are ready.

Inside the template's HTML, you can use the built-in helper Template.subscriptionsReady, which is an easy pattern for showing loading indicators in your templates when they depend on data loaded from subscriptions.

例子:

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 session 变量。在客户端 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加载订阅时将显示的模板。