javascript 在流星收集加载时显示加载器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12879762/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Displaying loader while meteor collection loads
提问by Gezim
I have a template, task_list, that looks like this:
我有一个模板，task_list看起来像这样：
{{#each tasks}}
{{> task}}
{{/each}}
Template.task_list.tasksreturns 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' renderedevent on task_list template, however it gets fired before the list is actually loaded. I also tried using renderedon the tasktemplate but it seems to never get called.
顺便说一句，我确实rendered在 task_list 模板上尝试了模板事件，但是它在实际加载列表之前被触发。我也尝试rendered在task模板上使用，但似乎永远不会被调用。
回答by Dan Dascalescu
Meteor 1.0.4 update: Now that template-level subscriptionsare available and the preferred pattern to using iron:router or standalone subscriptions,
Meteor 1.0.4 更新：现在模板级订阅可用，并且是使用 Iron:router 或独立订阅的首选模式，
There is a complementary function
Template.instance().subscriptionsReady()which returns true when all of the subscriptions called withthis.subscribeare 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.
有一个补充函数
Template.instance().subscriptionsReady()，当所有调用 with 的订阅this.subscribe准备就绪时返回 true 。在模板的 HTML 中，您可以使用内置的 helper
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:
Pre-Meteor 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 tasksLoadedsession 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-routeryou have a direct option to specify a loadingtemplate which will be displayed while the subscription is loading.
更新：使用铁路由器，您可以直接选择指定一个loading模板，该模板将在订阅加载时显示。
回答by Cagdas Can
Dan'sanswer 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 packagefor a nice looking spinner.
另外，我推荐旋转包以获得漂亮的旋转器。
回答by Jan Klimo
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 Progress- shows a progress bar on the top of the page (Youtube style)
- 旋转- 显示一个旋转的轮子。使用 Iron Router，您可以指定一个显示旋转轮的加载模板。
- Iron Router Progress- 在页面顶部显示一个进度条（Youtube 风格）
They both work pretty much out of the box, have a look at their documentation for more advanced options.
它们几乎都是开箱即用的，查看他们的文档以获得更高级的选项。
