Как использовать подписки на метеорыReady(), чтобы убедиться, что данные готовы перед рендерингом шаблона?

Одна из проблем использования нового и находящегося в стадии разработки фреймворка заключается в том, что советы, которые вы найдете в Интернете, часто устарели. Это вдвойне относится к Meteor, где ответы SO и веб-статьи часто относятся к версии до 1.0.x или ранней версии 1.0.x, или к предыдущей версии iron-router, или до того, как они представили функцию на прошлой неделе, и так далее. .

Все еще ломаю голову над тем, как использовать функцию subscribesReady() в контексте ожидания шаблона, пока подписки не будут готовы для него. Мне это определенно нужно, так как мой шаблон пытается отобразиться без своих данных примерно в 3/4 случаев.

Как использовать подпискиReady()? Я видел примеры, которые используют его в html, который я считаю глупым (нечеткое представление и функция). Как использовать его в кодовой части шаблона?

Он используется в железе-роутере с каким-то waitOn? Должен ли я обернуть его циклом 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 meteor templates iron-router meteor-collections
person Wes Modes    schedule 22.04.2015    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Путь железного маршрутизатора:

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>

Путь Метеора:

Вы можете использовать this.subscribe из обратного вызова onCreated, чтобы указать, какие публикации данных этот шаблон зависит от

Шаг 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>
person meteorBuzz    schedule 20.05.2015

arrow_upward
0
arrow_downward

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

person Tomas Hromnik    schedule 22.04.2015