Emberコンポーネントがストアデータをロードする

Question

storeデータをロードする最も適切なライフサイクルは、どのライフサイクルがEmber.Componentですか？

データを非同期でロードしています。だから私は実際のデータをrouteからロードしていないのですが、そのメタデータは？

たとえば、著者のnameに基づいた書籍のリストと、publisherのリストがロードされています。 （これは単なるイラストです）。

著者のリストと出版社のリストがあります。

コード：

import Ember from 'ember'; 

export default Ember.Route.extend({ 
    model(params) { 
    return Ember.RSVP.hash({ 
     authors: this.store.findAll('author'), 
     publishers: this.store.findAll('publisher') 
    }); 
    } 
}) 

routeからauthorsとpublishersを取得した後、今、私たちは本を得るために、すなわちthis.store.find('book', {author, publisher})を別のクエリを行うことができます。

Ember.Componentのどのライフサイクルが非同期的にこのようなデータをフェッチするのが適切かを尋ねたがっています。

更新：

この問題は、次の3通りの方法でロードロジックを置くことによって解決することができます：route内部setupControllerで

1. 。コンポーネントのライフサイクルのroute

2. のmodel()フックで

3. 。

考察（同僚との読書と議論）の後、コンポーネントは論理を考慮する必要があります。下の私の答えを見てください。

Answer 1

私はそれをチェーンすることができました。

import Ember from 'ember'; 

export default Ember.Route.extend({ 
    model(params) { 
    return Ember.RSVP.hash({ 
     m1s: this.store.findAll('meta1'), 
     m2s: this.store.findAll('meta2') 
    }).then(({m1, m2}) => { 

     let data = []; 
     m1s.forEach((m1) => { 
     m2s.forEach((m2) => {  
      this.store.query('modelName', { 
       m1.get('id'), 
       m2.get('id') 
      }); 

     }); 

     }); 

    }); 
    } 
}), 

あなたはしかし、あなた自身のadapterとserializerを記述する必要があります。

Answer 2

init()フックは、データを要求したい場所です。

import Component from 'ember-component'; 
import injectService from 'ember-service/inject'; 

export default Component.extend({ 
    store: injectService(), 

    posts: [], 

    init(){ 
    this._super(...arguments); 

    this._getPosts(); 
    }, 

    _getPosts() { 
    this.get('store').findAll('post').then((posts) => { 

     // because this is async you need to guard against the component 
     // being destroyed before the api call has finished because 
     // because `this.set` will throw an error. 
     if (this.isDestroyed) { return; } 

     this.set('posts', posts); 
    } 
});