在流星收集加载时显示加载器 [英] Displaying loader while meteor collection loads

问题描述

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

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

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

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

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

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

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

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

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

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

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.

推荐答案

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

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

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

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

在模板的 HTML 中，您可以使用内置帮助器 Template.subscriptionsReady，这是一种简单的模式，用于在模板中显示加载指示器(当它们依赖于从订阅加载的数据时).>

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>

这比为整个页面使用一个通用的加载模板要好，因为加载部分被本地化到页面中实际有新数据的部分.

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:

这个想法是将一个 onReady 函数传递给 Meteor.subscribe:

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

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

然后，让您的模板依赖于 tasksLoaded 会话变量.在客户端 JavaScript 中:

Then, make your template depend on the tasksLoaded session variable. In the client 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 模板.

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

这篇关于在流星收集加载时显示加载器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！