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

问题描述

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

  {{＃each tasks}} 
 {{>任务}} 
 {{/ each}} 
  

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

我想要显示一个载入指标。

BTW，我试过在task_list模板上的模板'渲染事件，但它在列表实际加载之前被触发。我也尝试在任务模板上使用呈现，但似乎永远不会调用。

解决方案

Meteor 1.0.4更新：现在模板级订阅以及使用iron：router或独立订阅的首选模式

有一个补充函数 Template.instance（）。subscriptionsReady（）当所有订阅用 this.subscribe

在模板的HTML中，您可以使用内置的助手 Template.subscriptionsReady


示例：c $ c> c $ c> ：

  Template.notifications.onCreated（function（）{
 //在onCreated中使用this.subscribe callback 
 this.subscribe（notifications）; 
}）; 
< template name =notifications> 
 {{#if Template.subscriptionsReady}} 
<！ - 当所有数据准备就绪时显示。 - > 
 {{#each notifications}} 
 {{>通知}} 
 {{/ each}} 
 {{else}} 
正在载入... 
 {{/ if}} 
< / template> 
  

这比为整个页面提供通用加载模板更好，因为加载部分已本地化

：

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

  Meteor.subscribe（'tasks'，function onReady ）{
 Session.set（'tasksLoaded'，true）; 
}）; 
  

然后，使你的模板依赖 tasksLoaded session变量。在客户端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}} 
  

UPDATE a href =https://github.com/EventedMind/iron-router> iron-router 您可以直接选择指定加载模板将在加载订阅时显示。

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

{{#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.

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.

解决方案

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

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

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.

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:

The idea is to pass an onReady function to 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:

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.

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