如何在渲染模板之前使用流星订阅Ready() 来确保数据准备就绪？答案

【问题标题】：How do I use meteor subscriptionsReady() to ensure data is ready before rendering template?如何在渲染模板之前使用流星订阅Ready() 来确保数据准备就绪？
【发布时间】：2015-06-29 14:11:39
【问题描述】：

使用新的和正在开发的框架的挑战之一是，您在网络上找到的建议通常已经过时。这双重适用于 Meteor，其中 SO 答案和网络文章通常针对 1.0.x 之前的版本或 1.0.x 早期版本，或者针对之前版本的 Iron-router，或者在他们上周推出功能之前，等等.

仍然对如何在让模板等待订阅准备就绪的上下文中使用 subscriptionsReady() 函数感到困惑。我当然需要它，因为我的模板尝试在大约 3/4 的时间没有数据的情况下进行渲染。

如何使用 subscriptionsReady()？我已经看到在 html 中使用它的示例，我认为这有点愚蠢（模糊演示和功能）。如何在模板的代码部分使用它？

它是否用于具有某种 waitOn 功能的 Iron-router？我是否在模板渲染器中用 while 循环包装它？能举个简单的例子吗？

强制性代码的东西...我的模板路线：

Router.route('/', {
  path: '/',
  template: 'navmenu',
  onBeforeAction: function() {
    this.next();
  }
});

我的订阅：

// Chapters
ChapterCollection = new Mongo.Collection("ChapterCollection");

if(Meteor.isClient){

    Meteor.subscribe('users');
    Meteor.subscribe('roles');
    Meteor.subscribe('ChapterCollection');
}

html 部分非常简单，一些 HTML 包裹在模板标签中。

我的模板代码：

Template.navmenu.rendered = function() {

    // Load all chapters from collections
    // Unless it decides to delay and then we are *%&@ed
    chapterArray = ChapterCollection.find().fetch();

    ... other stuff ...
}

感谢您的帮助。

【问题讨论】：

标签： javascript templates meteor iron-router meteor-collections

【解决方案1】：

Iron 路由器方式：

Router.route('/', {
  name: 'nameOfRoute',

  waitOn: function () {
   // we will wait for these subsciptions
    return [Meteor.subscribe('users'), Meteor.subscribe('roles'), Meteor.subscribe('ChapterCollection')]
  },

  action: function () {
  // this.ready() is true if all items in the wait list are ready
    if (this.ready()) {
        this.render('yourTemplate');
    }
    else {
        // if not ready, you can render another template in the meantime.
        this.render('Loading');
        }
    }
});

在action 函数中，您还可以创建模板助手。例如，如果waitOn 函数中的一个订阅从名为ChapterCollection 的集合中返回文档，则名为helperA 的帮助器会将这些数据传递给模板：

if (this.ready()) {
    this.render('yourTemplate', { data: {helperA: ChapterCollection.find()} });
}

html:

<template name="yourTemplate">
 //use the #each or #with block with respect to the data being returned. E.g
  {{#each helperA}}
    {{fieldName}}
  {{/each}}
</template>

流星之道：

您可以使用 onCreated 回调中的this.subscribe 来指定此模板所依赖的数据发布

第 1 步：

所以一个简单的一步一步的解释：创建模板后，将调用这些订阅。请注意，这是我们在步骤 2 中在模板中所做的。防止“内容”在订阅准备好之前呈现

Template.yourtemplate.onCreated(function () {
  this.subscribe("users");
  this.subscribe("roles");
  this.subscribe("ChapterCollection");
});

第 2 步：

<template name="yourTemplate">

    {{#if Template.subscriptionsReady}}

    // all of the template contents here will be rendered ONLY when the subscriptions within the onCreated callbacks are ready.

    {{else}}

    // if subsciption is not ready, you may show something else here. E.g. "Loading...."

    {{/if}}

</template>

【讨论】：

【解决方案2】：

Iron Router 中有 waitOn 方法等待订阅：

Router.route('/', {
  name: 'navmenu',
  waitOn: function() {
    return [
      Meteor.subscribe('users');
      Meteor.subscribe('roles');
      Meteor.subscribe('ChapterCollection');
    ];
  },
  onBeforeAction: function() {
    this.next();
  }
});

因此您可以在客户端代码中删除订阅。

您的“模板”选项应该是“名称”。阅读Iron Router docs。

【讨论】：