Question

我有一个模板task_list，如下所示：

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

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

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

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

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

Answer 1

Meteor 1.0.4更新：现在template-level subscriptions可用并且使用铁的首选模式：路由器或独立订阅，

有一个补充函数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模板，该模板将在加载订阅时显示。

Answer 2

Dan's答案肯定是现场，但我想提醒我相信自动发布包必须被删除才能真正发挥作用。

meteor remove autopublish

另外，我建议spin package寻找漂亮的微调器。

Answer 3

在此期间发布了一些不错的软件包。看看这两个：

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

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

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

3 个答案: