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

【问题标题】：Per-Model Promise status on Ember.js loading templateEmber.js 加载模板上的每个模型承诺状态
【发布时间】：2016-03-25 13:30:30
【问题描述】：

我有一个 Ember.js (2.3) SPA。在应用程序的一部分的父路由中，我在许多不同的模型类型上加载了相当多的数据（~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"

我想做的是增加我现有的父加载模板（目前只是一个微调器 .gif），其中包含有关每个承诺状态的信息。因此，当模板首次呈现时，它会显示每种模型类型：

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

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

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

我看到documentation for a Route loading action，但它使用的是控制器，并且文档似乎表明控制器已被弃用（我还没有在项目中使用任何控制器）。

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

【问题讨论】：

标签： javascript templates ember.js promise loading

【解决方案1】：

不幸的是，似乎没有办法通过加载子状态来实现您想要的。使用Ember.RSVP.Hash 将等待所有这些承诺在一次渲染所有内容之前解决。为了更好地控制各个承诺的呈现方式，我认为您正在寻找的是PromiseProxyMixin。以下是使用中的PromixeProxyMixin 示例：http://blog.ksol.fr/promise-aware-controllers-and-components/

但是这个 Ember 插件让以这种方式处理 Promise 变得更加容易：ember-deferred-content

您需要重新构建模型挂钩以将这些异步调用从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。

2016 年 4 月 2 日更新：

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

【讨论】：