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核心團隊成員。