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

I have a template, task_list, that looks like this:

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

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

Template.task_list.tasks returns a collection and in the ui, it seems to take a bit of time to load.

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

While the collection is loading, I'd like to show a loading indicator.

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

Any ideas on how I might be able to do that?

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

BTW, I did try the templates' rendered event on task_list template, however it gets fired before the list is actually loaded. I also tried using rendered on the task template but it seems to never get called.

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

3 个解决方案

#1

Meteor 1.0.4 update: Now that template-level subscriptions are available and the preferred pattern to using iron:router or standalone subscriptions,

Meteor 1.0.4更新：既然模板级订阅可用，并且使用铁的首选模式：路由器或独立订阅，

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

有一个补充函数Template.instance（）。subscriptionsReady（），当使用this.subscribe调用的所有订阅都准备就绪时返回true。

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.

在模板的HTML中，您可以使用内置帮助程序Template.subscriptionsReady，这是一种简单的模式，用于在模板依赖于从订阅加载的数据时显示模板中的加载指示符。

Example:

例：

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>

This is better than having a generic loading template for the whole page, because the loading section is localized to the part of the page that actually has new data.

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

Pre-Meteor 1.0.4:

前流星1.0.4：

The idea is to pass an onReady function to Meteor.subscribe:

想法是将onReady函数传递给Meteor.subscribe：

Meteor.subscribe('tasks', function onReady() {
  Session.set('tasksLoaded', true);
});

Then, make your template depend on the tasksLoaded session variable. In the client JavaScript:

然后，使您的模板依赖于tasksLoaded会话变量。在客户端JavaScript中：

Template.task_list.helpers({
  tasksLoaded: function () {
    return Session.get('tasksLoaded');
  }
});

In your template:

在您的模板中：

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

UPDATE: With iron-router you have a direct option to specify a loading template which will be displayed while the subscription is loading.

更新：使用iron-router，您可以直接选择指定加载模板，该模板将在加载订阅时显示。

#2

Dan's answer was definitely spot on, but I want to remind that I belive autopublish package has to be removed for it to actually work.

丹的回答肯定是现场，但我想提醒我相信自动发布包必须被删除才能真正起作用。

meteor remove autopublish

Plus, I recommend spin package for a nice looking spinner.

另外，我推荐旋转包装以获得漂亮的旋转器。

#3

There have been some nice packages released in the meantime. Check out these two:

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

Spin - displays a spinning wheel. With Iron Router, you can specify a loading template which shows the spinning wheel.
旋转 - 显示旋转轮。使用Iron Router，您可以指定显示旋转轮的加载模板。
Iron Router Progress - shows a progress bar on the top of the page (Youtube style)
Iron Router Progress - 在页面顶部显示进度条（Youtube样式）

They both work pretty much out of the box, have a look at their documentation for more advanced options.

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

#1