一部のデータがロードされないときにEmber.jsの画面を部分的にレンダリングする

Question

Ember.RSVP.hashを使用して、いくつかの異なる場所からデータを読み込むモデルを持つEmberルートがあります。バックエンドでの異なるAPIルートへの呼び出しで、これらの結果は、それぞれ：

export default Ember.Route.extend(AuthenticatedRouteMixin, { 
    model() { 
     return Ember.RSVP.hash({ 
      profile: this.store.queryRecord('profile', {}), 
      subscriptions: this.store.findAll('subscription'), 
      packages: this.store.findAll('package'), 
     }); 
    }, 
}); 

私がいる問題は、データコールのどのがエラーをスローした場合、全体のテンプレートの読み込みに失敗したということです。私が代わりにしたいのは、エラーの場合でも利用可能なデータを表示し、ロードできなかった部分を適切なタイプの空のモデルとして表示することです（いくつかの追加のエラー情報があります）。しかし、私はこれを行うことができないようです。私はルートにエラーハンドラを追加しようとしましたが、エラーハンドラから、エラーにもかかわらず遷移を続ける方法がないようです。

Answer 1

1つの可能性は、そのような情報を得るためにサービスを利用することです。モデルは完全にロードされますが、ロードされた後にサービスからのデータが表示されます。それは（同じ著者​​からも）データを取得するために、1つのまたは複数の他のサービスを使用するかどうかを

は、私はルートから下りデータを渡すことをお勧めhttp://emberigniter.com/render-promise-before-it-resolves/

Answer 2

を見てみましょう。テンプレートは、コンポーネントに提供されたモデルに個別の要求を入力することによって、部分的にレンダリングすることができます。この種のコードのための良い場所はsetupControllerです。通常、コンポーネント間の論理的な結合（特定の広告を表示するコンポーネントなど）がある場合は、コンポーネントからサービスへの呼び出しを追加します。

粗い例えば、 http://emberjs.jsbin.com/netesehasi/1/edit?html,js,output

JS

... 
App.IndexRoute = Ember.Route.extend({ 
    model:function(){ 
    return {dataForA:null,dataForB:null,dataForC:null}; 
    }, 
    setupController:function(controller,model) { 
    this._super.apply(arguments); 

    // simulate fetching data 
     setTimeout(function(){ 
     Ember.set(model,'dataForA', 'this is data for component a'); 
     controller.set('model', model); 
     },2000); 

     setTimeout(function(){ 
     Ember.set(model,'dataForB', 'this is data for component b'); 
     controller.set('model', model); 
     },1000); 

     setTimeout(function(){ 
     Ember.set(model,'dataForC', {error:'error for component c'}); 
     controller.set('model', model); 
     },3000); 



    } 
}); 
... 

HBS

... 
<script type="text/x-handlebars" data-template-name="components/comp-a"> 
{{#if data}} 
    {{data}} 
    {{else}} 
    loading... 
    {{/if}} 
    </script> 

    <script type="text/x-handlebars" data-template-name="components/comp-b"> 
    {{#if data}} 
    {{data}} 
    {{else}} 
    loading... 
    {{/if}} 
    </script> 

    <script type="text/x-handlebars" data-template-name="components/comp-c"> 
    {{#if data}} 
    {{#if data.error}} 
     {{data.error}} 
    {{else}} 
     {{data}} 
    {{/if}} 
    {{else}} 
    loading... 
    {{/if}} 
    </script> 
...