Question

我有一个Ember路线，其模型使用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://emberigniter.com/should-components-load-data/

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

当某些数据无法加载时，在Ember.js中部分渲染一个屏幕

2 个答案: