4

初めて Meteor アプリを作成しましたが、とても気に入っています。ただし、実際の本番データが含まれているため、少し遅くなります。「これをクリックしても何も起こらない」というレポートが表示されます。

テンプレートの再描画中に読み込みメッセージを表示して、何かが起こっていることをユーザーに知らせる方法はありますか?

さらに説明するために、このテンプレートを見てください (簡単にするために、実際のコードではありません)。

Template.all_posts.posts = function() {
  return Posts.find({'category_id': Session.get('current_category')});
}

したがって、コンソールを開いてSession.set('current_category', 1)を実行すると、計算を実行してテンプレートを再描画するのに 2 秒かかるとしましょう。その 2 秒間に読み込みインジケータを表示したいと思います。

明確にするために、私はすでに読み込みインジケーターを表示する方法を知っています。実際、私はすでに最初のページの読み込み時にそれを行っており、すべてのサブスクリプションがready(). テンプレートが再描画されるたびに同じロジックがどこに適用されるか (読み込みアイコンの表示と非表示) を知りたいだけです。擬似コードは問題なく動作します:

要するにメテオが忙しい時はそれを反映させたい。

どんな助けでも大歓迎です！

編集 10/09/13:

ドキュメントから...

これらの Meteor 関数は、リアクティブ計算としてコードを実行します。

  • テンプレート
  • Meteor.render と Meteor.renderList
  • Deps.autorun

考えられる解決策の 1 つは、これらの「計算」のいずれかが無効になったときに読み込みインジケーターを表示することから始めることができると思います。

たとえば、コードが の内部で実行されているDeps.autorun場合、計算インスタンスが最初の引数として渡され、次のonInvalidateようにそのメソッドにコールバックを渡すことができます。

Deps.autorun(function(computation) {

  // do reactive stuff

  computation.onInvalidate(function() {
    // display loading indicator
  });
});

ただし、私の知る限り、他の Meteor メソッドでは計算オブジェクトにアクセスできませんDeps.autorun。

ローディングインジケーターを非表示にする限り、計算の無効化により(再) レンダリングされる最後のテンプレートのコールバック内renderedでそれを行うのが最善の方法だと思います。

これに関する洞察、提案、トリック、ハックなどはありますか?

4

2 に答える 2

0

meteor documentationTemplate.myTemplate.created = function ( ) { ... }に記載されているように、おそらく を使用できます。テンプレートの作成時に jQuery を実行し、ローディング クラスを本文に追加してから、ローディング クラスを削除できますか?Template.myTemplate.rendered

于 2013-10-08T19:05:05.883 に答える
0

この問題を解決したことがない場合に備えて、私の質問への回答の一部として投稿した別のユーザーの解決策を共有したいと思います。ここでネイト・ストラウザーが回答：

コレクションの .ready() メソッドにフックして、いつ表示できるかを判断します。すべてのデータがクライアントにロードされると、これは true を返します。コードがすべてのデータを待機しておらず、データの到着時にレンダリングしているため、空のレンダリング、部分的なレンダリング、完全なレンダリングが表示されます。これは悪いことではありませんが、常に望ましいとは限りません。https://github.com/oortcloud/unofficial-meteor-faq#how-do-i-know-when-my-subscription-is-ready-and-not-still-loadingのようなものを使用して独自のソリューションを展開できます、しかし、問題のルートのwaitOn関数でiron-routerを使用することをお勧めします https://github.com/EventedMind/iron-router#waiting-on-subscriptions-waiton、これを loadingTemplate オプションと組み合わせて使用​​すると、読み込み中に素敵な (Loading....) メッセージを作成し、完全に入力されたテンプレートにすぐに移行できます

完全部分部分は無視できます。

于 2014-03-11T03:56:03.163 に答える