Ember.js 以异步方式在一个路由中获取 2 个嵌套模型

Question

我有 2 次对服务器的调用，调用时间很长（10-20 秒）。在第一个请求（无关紧要）完成后，我需要在页面上更新信息。第二次请求完成后 - 我还需要更新部分页面。

怎么实现，因为我试过用Promises实现

App.IndexRoute = Ember.Route.extend({
    model: function(){
      return Ember.$.getJSON('url').then(firstMethod).then(secondMethod)
    }
})

但是不行，因为secondMethod会在firstMethod结束后执行。

我也试过使用这个代码：

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return Ember.RSVP.hash({
      first_data: Ember.$.getJSON('url1'),
      second_data: Ember.$.getJSON('url2') 
    });
  }
});

但我有同样的问题 - 数据将在 2 次调用完成后 return。

如何运行异步这2个请求并独立更新页面上的部分数据？

Answer 1

我会使用 PromiseProxyMixin 创建对象代理，这些代理将在您的承诺解决时自动更新。像这样：

model: function() {
    return Ember.Object.create({
        first_data: Ember.ObjectProxy.createWithMixins(Ember.PromiseProxyMixin, {
            promise: Ember.$.getJSON('url1')
        }),
        second_data: Ember.ObjectProxy.createWithMixins(Ember.PromiseProxyMixin, {
            promise: Ember.$.getJSON('url2')
        })
    });
}

Ember 将监视您的模型和两个数据属性以获取更新。在承诺得到解决之前，每个属性请求都会 return undefined。但是当承诺解决时，PromiseProxyMixin 将触发对代理的更新，这将反过来触发对您正在观看的所有属性的更新。

Ember.js 以异步方式在一个路由中获取 2 个嵌套模型

Ember.js get 2 nested models in one route in asynchronous way

ajax

asynchronous

promise

ember.js