如何在渲染模板之前使用meteor subscriptionsReady（）来确保数据准备就绪？ [英] How do I use meteor subscriptionsReady() to ensure data is ready before rendering template?

问题描述

使用新的和正在开发的框架的挑战之一是您在网络上找到的建议经常过时。这对于Meteor来说是双重的，其中SO答案和网络文章通常用于1.0.x之前版本或早期1.0.x版本，或者用于之前版本的铁路由器，或者在他们上周引入功能之前，等等。

One of the challenges of using a framework that is newish and under development is that the advice you find on the web is often outdated. This applies doubly to Meteor where the SO answers and web articles are often for a pre 1.0.x or an early 1.0.x version, or for the previous version of iron-router, or before they introduced a feature last week, and so on.

在模板等待订阅准备就绪的情况下，如何使用subscriptionsReady（）函数仍然令人费解。我当然需要它，因为我的模板试图在没有3/4时间的数据的情况下渲染。

Still puzzling over how to use the subscriptionsReady() function in the context of having a template wait until subscriptions are ready for it. I certainly need it since my template tries to render without its data about 3/4 of the time.

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

How do I use subscriptionsReady()? I've seen examples which use it in the html which I think is kind of dumb (fuzzing presentation and function). How do I use it in the code portion of a template?

它是否在某些waitOn的铁路由器中使用？我在模板渲染器中使用while循环包装它吗？你能给出一个简化的例子吗？

Is it used in iron-router with some kind of waitOn? Do I wrap it with a while loop in my template renderer? Can you give a simplified example?

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

Obligatory code stuff... My route for my template:

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包含在模板标签中。

The html portion is pretty plain, some HTML wrapped in a template tag.

我的模板代码：

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 ...
}

感谢您的帮助。

推荐答案

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');
        }
    }
});

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

Within the action function, you may also create template helpers. For example, if one of the subscriptions in the waitOn function returns documents from a collection called ChapterCollection, the helper called helperA will pass this data to the template:

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>

流星方式：

您可以使用 this.subscribe <来自onCreated回调的/ a>指定此模板所依赖的数据出版物

You can use this.subscribe from an onCreated callback to specify which data publications this template depends on

步骤1：

这是一个简单的逐步解释：
一旦创建了模板，就会调用这些订阅。请注意，这是我们在步骤2中的模板中所做的事情。在订阅准备好之前阻止'内容'呈现

So a simple step by step explanation: Once the template has been created, these subscriptions are called. Note here, it's what we do in the template in the step 2. prevents the 'contents' from rendering until the subscriptions are ready

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>

这篇关于如何在渲染模板之前使用meteor subscriptionsReady（）来确保数据准备就绪？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！