在流星集合加载时显示加载器

Question

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

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

Template.task_list.tasks 返回一个集合,在ui中,似乎需要花费一些时间来加载.

当集合正在加载时,我想显示一个加载指示器.

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

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

Answer 1

Meteor 1.0.4更新:现在模板级订阅可用,并且使用铁的首选模式:路由器或独立订阅,

有一个补充函数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>

这比为整个页面设置通用加载模板更好,因为加载部分已本地化到实际具有新数据的页面部分.

前流星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加载订阅时显示的模板.

Answer 2

丹的回答肯定是现场,但我想提醒我相信自动发布包必须被删除才能实际工作.

meteor remove autopublish

另外,我建议旋转包装以获得漂亮的旋转器.