2016-03-25 10 views
0

私はEmber.js(2.3)SPAを持っています。アプリケーションの一部の親ルートでは、私は、多くの異なるモデルタイプを介したデータのかなり(〜3.5メガバイト)をロードしています:私は私の既存の親を増補されませんしたいのですがどのようなEmber.jsのモデルごとの約束ステータス

App.ParentRoute = Ember.Route.extend 
    model: -> 
    Ember.RSVP.hash 
     foos: @store.findAll "foo" 
     bars: @store.findAll "bar" 
     bazes: @store.findAll "baz" 
     quxes: @store.findAll "qux" 

これらの約束事のそれぞれの状況に関する情報を含むテンプレート(現在はスピナー.gif)を読み込みます。

[ ] Loading Foos... 
[ ] Loading Bars... 
[ ] Loading Bazes... 
[ ] Loading Quxes... 

とRSVP.Hashの各約束が解決のように、それは進歩の指標として示されています:テンプレートは、最初に、各モデルの種類を示してレンダリングするときに

[ ] Loading Foos... 
[X] Loaded 16 Bars 
[ ] Loading Bazes... 
[X] Loaded 213 Quxes 

私はdocumentation for a Route loading actionを参照してくださいが、それはコントローラを使用しており、ドキュメンテーションはコントローラが廃止予定であることを示しているようです(私はまだプロジェクトでコントローラを使用していません)。

ローディングテンプレート内のモデル()からPromise状態にアクセスするにはどうすればよいですか?

答えて

3

残念ながら、ローディングサブステージを使用して目的を達成する方法はありません。 Ember.RSVP.Hashを使用すると、すべてのコンテンツを一度にレンダリングする前に、それらの約束がすべて解決するのを待つでしょう。個々の約束をどのようにレンダリングするかをより詳細に制御するために、あなたが探しているのはPromiseProxyMixinだと思います。 http://blog.ksol.fr/promise-aware-controllers-and-components/

しかし、このエンバーのアドオンは、この方法は、さらに簡単な約束で作業を行います:ここでは、使用中PromixeProxyMixinの一例であるember-deferred-content

あなたはコールするEmber.RSVP.Hashのうちこれらの非同期呼び出しを破るために、あなたのモデルフックを再構築する必要がありますそれらは互いに独立して異なる時間に解決することができます。そして、あなたはそれぞれの約束の状態を一つずつ追跡することができます。 ember-deferred-contentを使用して、その後

model() { 
    return { 
    foos: @store.findAll "foo", 
    bars: @store.findAll "bar", 
    bazes: @store.findAll "baz", 
    quxes: @store.findAll "qux", 
    } 
} 

はたとえば、次のような何かを返すモデルフック持つことができ

{{#deferred-content model.foos as |foos|}} 
    {{#foos.pending}} 
    [ ] Loading Foos... 
    {{/foos.pending}} 
    {{#foos.fulfilled as |f|}} 
    [x] Loaded {{f.length}} Foos 
    {{/foos.fulfilled}} 
{{/deferred-content}} 

を...とbarbaz、およびquxのために繰り返します。

UPDATE 4/2/16:ember-promise-helpers

私は最近、別の偉大なアドオン、同様の効果を使用することができ学びました。そのアドオンの作成者であるfivetanleyも、Ember Dataコアのチームメンバーです。