18

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

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

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

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

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

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

4

3 回答 3

32

Meteor 1.0.4 更新：现在模板级订阅可用，并且是使用 iron:router 或独立订阅的首选模式，

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

在模板的 HTML 中，您可以使用内置的 helper 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在订阅加载时显示的模板。

于 2012-10-14T07:43:50.297 回答
5

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

meteor remove autopublish

另外，我推荐spin package来获得漂亮的微调器。

于 2013-05-17T14:17:33.030 回答
2

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

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

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

于 2014-12-06T11:29:08.823 回答