Ember.js 2.ページのレンダリング後にバックグラウンドでフェッチする

Question

著者のリストを示す単純なページ "author"があります。

当然の各著者が多くの書籍がありますが、そのページ（とAPI中）で、私は（は/を含め）あらゆる帳データを表示しません。私はデフォルトのモデルを（持っている著者ルート）で

は：

model() { 
    return this.store.findAll('author'); 
} 

、すべてがOKです。

今、私は怠け者をフェッチ何か（バックグラウンドで）他のAPIを（本のもの）からいくつかのデータを必要とします。

しかし、私はこの呼び出しが私の著者ページのレンダリングをブロックしないようにしたいと思います。だから、私はデフォルトとスピーディーbeforeModel()、model()とafterModel()フェッチせずに（作者のデータを除く）。誰かがathorをクリックしたとき、私はすでに私の「ストア」で本を持っている。このように、「api/books?author:1,2,3,4,5...」

を呼び出すページは私が何か必要なレンダリングされた後にのみ（多分サービスを？）

（その本のページに待機中のローダーはありません）。

これを行う方法？

Answer 1

1.あなたはなまけUIをブロックすることなく、関係データをロードして保存したい場合：

あなたは（特別hasMany -relationshipsで）遅延ロード関係のデータを表示したくない場合は、私がそうすることをお勧めしますafterModel -hook：

route.js：

// ... 

    afterModel(authors) { 
    let lastPromise = new Promise(function(resolve) { resolve(); }); 
    authors.forEach(author => { 
     lastPromise = lastPromise.then(() => { 
     return author.get('books'); 
     }); 
    }); 
    }, 

    // ...   

2.あなたは怠惰ブロックせずに、ストアおよび表示関係データをロードする場合キングUI：

これを行うにはいくつかの方法があります。怠惰なデータをロードするときに好む方法の1つは、次のとおりです。

まず、データの表示とロードをカプセル化するコンポーネントを作成します。あなたの例では、私のコンポーネントをbook-shelfと呼ぶでしょう。

DOMに挿入された後、私のコンポーネントはその書籍を表示します。次のコードを参照してください。

component.js：

import Ember from 'ember'; 

const { 
    get, 
    computed, 
    ArrayProxy, 
    PromiseProxyMixin, 
    inject: { service } 
} = Ember; 

const ArrayPromiseProxy = ArrayProxy.extend(PromiseProxyMixin); 

export default Ember.Component.extend({ 
    // API: 
    author: null, 

    // Internal: 
    store: service(), 
    books: computed(
    'author.id', 
    function() { 
     if(!get(this, 'author.id')) { 
     return []; 
     } 
     return ArrayPromiseProxy.create({ 
     promise: get(this, 'store').query('book', { authorId: get(this, 'author.id') }) 
     }); 
    } 
), 
}); 

そして、あなたのテンプレートで

。HBS：

<div class="book-shelf"> 
    {{#if books.isFulfilled}} 
    Books of {{author.name}}: 
    <ul> 
     {{#each books as |book|}} 
     <li>{{book.name}}</li> 
     {{/each}} 
    </ul> 
    {{else}} 
    Loading... please wait... 
    {{/if}} 
</div> 

このアプローチでは、配列のように行動するだけでなく、データがロードされているかどうかの情報を提供するために、約束プロキシを持つ配列のプロキシを兼ね備えています。

{{book-shelf author=mySpecialAuthor}}