我有一个 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"
我想做的是用有关每个 promise 的状态的信息来增强我现有的父加载模板(当前只是一个微调器.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但它使用的是 Controller ,并且文档似乎表明 Controller 已被弃用(我尚未在项目中使用任何 Controller )。
如何从加载模板中的 model() 访问 Promise 状态?
最佳答案
不幸的是,似乎没有办法通过加载子状态来实现你想要的。使用 Ember.RSVP.Hash
将等待所有这些 promise 得到解决,然后再一次呈现所有内容。为了更好地控制各个 Promise 的呈现方式,我认为您正在寻找的是 PromiseProxyMixin
。以下是使用中的 PromixeProxyMixin
示例:http://blog.ksol.fr/promise-aware-controllers-and-components/
但是这个 Ember 插件使得以这种方式处理 Promise 变得更加容易:ember-deferred-content
您需要重构模型 Hook ,将这些异步调用从 Ember.RSVP.Hash
中分离出来,分别调用它们,以便它们可以在不同时间彼此独立地解析,这样你就可以一一跟踪每个 Promise 的状态。
例如,您可以有一个返回类似以下内容的模型 Hook :
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 核心团队成员。
关于javascript - Ember.js 加载模板上的每个模型 Promise 状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36220901/