部分呈現在屏幕上時Ember.js一些數據不會加載

Question

我有，從幾個不同的地方加載數據，使用Ember.RSVP.hash模型灰燼路線。所有這些導致調用在後端不同的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

一種可能性是獲得此類信息，可使用的服務。模型將被完全加載，但服務數據將在加載後顯示。

看看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> 
...