Ember.js加载模板上的Per-Model Promise状态

Per-Model Promise status on Ember.js loading template

本文关键字：Per-Model Promise 状态 js 加载 Ember      更新时间：2023-09-26

我有一个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"

我想做的是用每个承诺的状态信息来增强我现有的父加载模板（目前只是一个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状态

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

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

您需要重组您的模型挂钩，以打破Ember.RSVP.Hash中的这些异步调用，从而分别调用它们，这样它们就可以在不同的时间独立地进行解析，这样您就可以逐一跟踪每个promise的状态。

例如，您可以有一个模型挂钩，它返回如下内容：

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助手。该附加组件的作者fiftanley也是Ember Data的核心团队成员。

相关文章：