Отображение загрузчика при загрузке метеоритов

У меня есть шаблон task_list, который выглядит следующим образом:

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

Template.task_list.tasks возвращает коллекцию, а в ui, похоже, требуется немного времени для загрузки.

Пока сбор загружается, я хотел бы показать индикатор загрузки.

Любые идеи о том, как я могу это сделать?

Кстати, я попытался создать шаблон rendered в шаблоне task_list, однако он запускается, прежде чем список будет загружен. Я также попытался использовать rendered в шаблоне task, но он, кажется, никогда не вызван.

ОТВЕТЫ

Ответ 1

Обновление Meteor 1.0.4: теперь доступны подписки на уровне шаблона, и предпочтительный шаблон для использования железа: роутер или автономные подписки,

Существует дополнительная функция Template.instance().subscriptionsReady(), которая возвращает true, когда все подписки, вызываемые с помощью this.subscribe, готовы.

Внутри HTML-шаблона вы можете использовать встроенный вспомогательный 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}}

UPDATE: при iron-router у вас есть прямая опция для указания шаблона loading, который будет отображаться во время загрузки подписки.

Ответ 2

Ответ Дэна определенно был на месте, но я хочу напомнить, что я верю, что пакет автоматической публикации должен быть удален, чтобы он действительно работал.

meteor remove autopublish

Кроме того, я рекомендую отменить пакет для красивого прядильщика.

Ответ 3

В то же время были выпущены хорошие пакеты. Проверьте эти два:

  • Spin - отображает вращающееся колесо. С помощью Iron Router вы можете указать шаблон загрузки, который показывает вращающееся колесо.
  • Iron Router Progress - показывает индикатор выполнения в верхней части страницы (стиль Youtube)

Они оба работают в значительной степени из коробки, посмотрите на свою документацию для более сложных опций.