javascript - `loading`子状态中的额外信息

Question

我有一个 Ember 应用程序。在给定的 route ，我有一个手工制作的模型，但不会立即加载。因此，我将其作为 promise :

export default Ember.Route.extend({
  model() {
    return MyModel.create().promise();
  }
})

不必太担心 MyModel 的工作原理。重要的是它返回 RSVP promise 。

因此，Ember 转换到加载路线。在那里，我有一个模板，可以正确渲染并显示旋转器，一旦 promise 得到解决，就会转换到正确的路线。

我的问题是:如何显示真正的进度？ MyModel 做了一些相对复杂的事情，有几个步骤，我想显示这些步骤的实际进度。我想展示有状态的进度，而不是无状态的旋转器。 MyModel (或者更确切地说，它的 promise )知道其进度，但我不知道如何将其传达给模板。

我为此加载状态实现了一条路线和一个 Controller 。两者都正确加载，但似乎都无法访问任何可能有帮助的内容。事实上，我看不到 RSVP Promise 甚至有一个进度处理程序，就像其他库一样。我错过了什么吗？

Answer 1

您可以使用Route的controllerFor函数来访问其他 Controller 。

因此，在主路由中，您可以使用 this.controllerFor('loading') 来获取 LoadingController 并以这种方式设置其属性。

你的model钩子(Hook)可能看起来像这样:

model: function() {
  var loadingController = this.controllerFor('loading');
  loadingController.set('progress', 0);

  var promise = new Ember.RSVP.Promise(function(resolve, reject) {
    Ember.run.later(loadingController, 'set', 'progress', 10, 1000);
    Ember.run.later(loadingController, 'set', 'progress', 30, 1300);
    Ember.run.later(loadingController, 'set', 'progress', 50, 1800);
    Ember.run.later(loadingController, 'set', 'progress', 70, 2300);
    Ember.run.later(loadingController, 'set', 'progress', 90, 3300);
    Ember.run.later(loadingController, 'set', 'progress', 100, 4000);
    Ember.run.later(null, resolve, [1,2,3], 4000);
  });

  loadingController.set('promise', promise);
  return promise;
}

我创建了一个 JSBin这给出了一个例子。