javascript - 在 Ember.js 中渲染应用程序之前等待模型加载

Question

我有许多不同的应用程序级模型——即当前用户、当前帐户等——我想在呈现我的应用程序之前加载它们。这应该如何以及在哪里完成？ This question/answer帮助很大，但它没有涵盖异步方面。

下面的代码完成了我想要的，但是在 beforeModel 中加载模型(利用它等待 promise 解决)似乎不正确。我是否应该在 ApplicationRoute 中加载这些模型？

App.ApplicationController = Ember.Controller.extend({
  currentAccount: null
});

App.ApplicationRoute = Ember.Route.extend({
  beforeModel: function () {
    var self = this;

    return App.Account.find(...).then(function (account) {
      self.controllerFor('application').set('currentAccount', account);
    });
  }
});

感谢您的帮助!

Answer 1

诀窍是从路由的模型方法返回一个 promise 。
这将导致路由器转换到 App.LoadingRoute 路由，直到 promise 解决(可用于加载指示条/轮子等)
当 promise resolve 时，App.LoadingRoute 将被停用，原始路由的 setupController 方法将被调用。
这适用于 ember-data promises、JQuery 的 $.ajax promises 和 ember-model 的 fetch promises。
只需确保在解决 promise 后返回实际模型即可。
如果 promise 被拒绝，这也是处理错误的好地方 - 但我会把它留给其他问题。

至于你应该在哪里加载你的模型 - 这取决于你的应用程序的使用。
通常您会加载一个模型，其中 URL 指示您需要该模型 - 经验法则是 URL 中模型 ID 的指示。
如果您需要预取一些数据，这当然会改变。

现在是一些代码:

App.SomeRoute = Ember.Route.extend({
   model: function(params){
       return App.SomeModel.fetch(params.model_id).then(function(modelData){
           // it is better to return the actual model here, and not the promise itself
           return App.SomeModel.find(params.model_id);
       });

   },
   setupController: function(controller, model){
       controller.set("model", model);
       // do some controller setup here - can be omitted if no setup is needed
       // this will run only after the promise has been resolved.
   }
});

App.LoadingRoute = Ember.Route.extend({
        activate: function(){
            this._super();
            // add some loading indication here
        },
        deactivate: function(){
            this._super();
            // remove loading indication
        }
}

希望这对您有所帮助。