部分呈现在屏幕上时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> 
...