`loading` substateの余分な情報 - javascript、ember.js

Emberアプリを持っています。与えられたルートには、すぐにはロードされない手作りのモデルがあります。したがって、私はそれを約束として引き渡します：

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

どのように心配しないでください MyModel 動作します。重要な点は、RSVPの約束を返すことです。

その結果、Emberは loading ルート。そこには、スピナーを正しく表示するテンプレートがあり、約束が解決されると正しいルートに移行します。

私の質問は： どうすれば本当の進歩を示すことができますか？ MyModel いくつかのステップで比較的複雑なことを行います。これらのステップの実際の進捗状況を示したいと思います。ステートレススピナーの代わりに、ステートフルな進捗を示したいと思います。 MyModel （というよりは、その約束）はその進捗については知っていますが、テンプレートに伝える方法はわかりません。

このためにルートとコントローラーを実装しましたローディング状態。どちらも正しくロードされますが、どちらもここで役立つ可能性のあるものにアクセスできないようです。実際、他のライブラリのように、RSVPプロミスにプログレスハンドラーがあることさえわかりません。何かが足りませんか？

回答：

あなたは、 Route"s controllerFor 他のコントローラーにアクセスする機能。

だからあなたのメインルートで使用することができます this.controllerFor("loading") 取得する LoadingController その方法でプロパティを設定します。

きみの model フックは次のようになります。

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 これがその例を示しています。