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

我有一个Ember.js（2.3）SPA。在应用程序的一部分父母的路线，我加载相当多的数据（约3.5MB）在许多不同的模型类型：Ember.js加载模板上的每个模型的承诺状态

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每个无极结算时，它显示为进步的指标：

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

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

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

来源

2016-03-25 Chris Tonkinson

不幸的是，似乎没有办法通过加载子状态实现你想要的。使用Ember.RSVP.Hash将等待所有这些承诺解决，然后再立即提供所有内容。为了更好地控制个人承诺的呈现方式，我认为你要找的是PromiseProxyMixin。下面是使用PromixeProxyMixin一个例子：http://blog.ksol.fr/promise-aware-controllers-and-components/

但这种灰烬插件使得与承诺以这种方式工作更容易：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。

更新16年4月2日：

我最近了解了另一个伟大的插件，它可用于类似的效果：ember-promise-helpers。该附加组件的作者fivetanley也是Ember Data核心团队成员。

来源

2016-03-25 14:47:12

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

回答

相关问题