18

task_list次のようなテンプレートがあります。

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

Template.task_list.tasksコレクションを返します。UIでは、読み込みに少し時間がかかるようです。

コレクションの読み込み中に、読み込みインジケーターを表示したいと思います。

私がそれをどのように行うことができるかについてのアイデアはありますか？

ところで、renderedtask_listテンプレートでテンプレートのイベントを試しましたが、リストが実際に読み込まれる前に発生します。テンプレートでも使っrenderedてみましたが、呼び出されないようです。task

4

3 に答える 3

32

Meteor 1.0.4アップデート：テンプレートレベルのサブスクリプションが利用可能になり、iron：routerまたはスタンドアロンサブスクリプションを使用するための推奨パターンが追加されました。

で呼び出されたすべてのサブスクリプションの準備ができ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}}

更新：iron-routerloadingを使用すると、サブスクリプションのロード中に表示されるテンプレートを指定する直接オプションがあります。

于 2012-10-14T07:43:50.297 に答える
5

ダンの答えは間違いなく的を射ていましたが、実際に機能させるには、自動公開パッケージを削除する必要があると思います。

meteor remove autopublish

さらに、見栄えの良いスピナーにはスピンパッケージをお勧めします。

于 2013-05-17T14:17:33.030 に答える
2

その間にいくつかの素晴らしいパッケージがリリースされました。これらの2つをチェックしてください：

  1. スピン-スピニングホイールを表示します。Iron Routerを使用すると、スピニングホイールを表示するローディングテンプレートを指定できます。
  2. Iron Router Progress-ページの上部に進行状況バーを表示します（Youtubeスタイル）

どちらも箱から出してすぐに機能します。より高度なオプションについては、ドキュメントを参照してください。

于 2014-12-06T11:29:08.823 に答える