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

IT技术 javascript collections meteor
2021-03-18 06:37:23

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

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

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

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

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

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

3个回答

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

有一个补充函数Template.instance().subscriptionsReady(),当所有调用 with 的订阅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>

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


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

更新:使用铁路由器,您可以直接选择指定一个loading模板,模板将在订阅加载时显示。

该功能很好,但是当所有订阅都准备就绪时,您如何进行回调?
2021-04-21 06:37:23
相关问题:除了正在iron-router加载的主页上的样式加载器之外,我还想在我的导航栏中有一个迷你加载器我的header模板中有没有办法以某种方式检查页面上的其余模板是否准备就绪?我可以找出是如何等待模板加载器实际上是-这是非常快速地加载。我尝试使用绝对定位 CSS 来将我的迷你加载器“放在”加载器的导航栏中,iron-router但它在某些页面和转换上变得一团糟。将它实际放在我的标题中将是理想的。
2021-04-22 06:37:23
谢谢,丹。这是现场。
2021-05-09 06:37:23
如果我通过 Iron:router 使用订阅,该怎么做?我在多个路由上重用组件,而每个路由加载不同的数据。因此,对于我的用例,在路由器中订阅对我来说很有意义。
2021-05-17 06:37:23

丹的回答绝对是正确的,但我想提醒一下,我相信必须删除自动发布包才能使其实际工作。

meteor remove autopublish

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

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

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

它们几乎都是开箱即用的,查看他们的文档以获得更高级的选项。

这些包确实派上用场。与此同时,Meteor 发布了 v1.0.4,它带来了模板级订阅和一个Template.subscriptionsReady助手。有关更多详细信息,请参阅我的答案
2021-05-05 06:37:23