Ember.js加载模板上的每模型承诺状态

Question

我有一个Ember.js（2.3）SPA。 在应用程序一部分的父级路由中，我正在许多不同的Model类型上加载大量数据（〜3.5MB）：

App.ParentRoute = Ember.Route.extend
  model: ->
    Ember.RSVP.hash
      foos: @store.findAll "foo"
      bars: @store.findAll "bar"
      bazes: @store.findAll "baz"
      quxes: @store.findAll "qux"

我想做的是在我现有的父加载模板（当前只是一个spinner .gif）中添加有关每个承诺状态的信息。 因此，当模板首次呈现时，它将显示每种模型类型：

[ ] Loading Foos...
[ ] Loading Bars...
[ ] Loading Bazes...
[ ] Loading Quxes...

然后随着RSVP.Hash中每个Promise的解析，它显示为进度指示器：

[ ] Loading Foos...
[X] Loaded 16 Bars
[ ] Loading Bazes...
[X] Loaded 213 Quxes

我看到了有关Route loading操作的文档，但它使用的是控制器，并且该文档似乎表明已弃用控制器（我在项目中尚未使用任何控制器）。

如何从加载模板中的model（）访问Promise状态？

Answer 1

不幸的是，似乎没有一种方法可以通过加载子状态来实现所需的功能。 使用Ember.RSVP.Hash将等待所有这些承诺都得到解决，然后立即呈现所有内容。 为了更好地控制个人承诺的呈现方式，我认为您正在寻找的是PromiseProxyMixin 。 这是正在使用的PromixeProxyMixin的示例： http : PromixeProxyMixin

但是，这个Ember插件使以这种方式处理承诺变得更加容易： 余烬延迟的内容

您将需要重新构建模型挂钩，以将这些异步调用从Ember.RSVP.Hash以分别调用它们，以便它们可以在不同的时间彼此独立地解析，这样您就可以跟踪每个状态一一答应。

例如，您可能具有返回以下内容的模型挂钩：

model() {
  return {
    foos: @store.findAll "foo",
    bars: @store.findAll "bar",
    bazes: @store.findAll "baz",
    quxes: @store.findAll "qux",
  }
}

然后，使用ember-deferred-content ：

{{#deferred-content model.foos as |foos|}}
  {{#foos.pending}}
    [ ] Loading Foos...
  {{/foos.pending}}
  {{#foos.fulfilled as |f|}}
    [x] Loaded {{f.length}} Foos
  {{/foos.fulfilled}}
{{/deferred-content}}

...然后重复执行bar ， baz和qux 。

更新4/2/16：

我最近了解到另一个很棒的附加组件，它可以起到类似的作用： ember-promise-helpers 。 该插件的作者Fivetanley还是Ember Data核心团队成员。