5

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

下面的代码完成了我想要的，但加载模型beforeModel（利用它等待承诺解决）似乎不正确。我什至应该加载这些模型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);
    });
  }
});

谢谢你的帮助！

4

3 回答 3

6

您想预加载数据/模型来初始化您的应用程序，并且觉得 beforeModel 不正确？

听起来您需要一个应用程序初始化程序！

在这种情况下，您的朋友：

App.deferReadiness(); // 暂停应用程序的进程，直到此调用的所有实例（即：多个初始化器）都与以下调用的实例匹配：

App.advanceReadiness(); // 认为这相当于一个 promise resolve 调用。

1）从您直接查找用户，修改提到的位置以适合您的应用程序设置：

Ember.Application.initializer({
    name: 'loadUser',
    after: 'store',
    initialize: function(container, app) {
        // modify this following to suit how you're determining the account
        var url = 'user/' + currentAccount;
        // tell the app to pause loading until advanceReadiness is declared
        app.deferReadiness();

        // load from JSON 
        Ember.$.getJSON('url').then(function(json) {

            var store = container.lookup('store:main');
            store.load(app.User, json);

            // tell app to start progressing again
            app.advanceReadiness();
        });
    }
});

2）通过元标记：

Ember.Application.initializer({
    name: 'currentUser'
    after: 'store',

    initialize: function(container, app) {
        app.deferReadiness();

        $(function() {
            // Look up an attribute in a meta tag
            var store      = container.lookup('store:main'),
                attributes = $('meta[name="current-user"]').attr('content');

            if (attributes) {
                var obj        = store.load(app.User, JSON.parse(attributes)),
                    user       = App.User.find(obj.id),
                    controller = container.lookup('controller:currentUser').set('content', user);

                container.typeInjection('controller', 'currentUser', 'controller:currentUser');
            }
            app.advanceReadiness();
        });
    }
});

3）通过Session数据：

Ember.Application.initializer({
    name  : 'currentUser',
    after : 'session',
    initialize: function(container, app) {
        var controller = container.lookup('controller:currentUser');
        container.typeInjection('controller', 'currentUser', 'controller:currentUser');
    }
});
于 2014-06-23T03:37:19.137 回答
6

诀窍是从路由的模型方法返回一个承诺。
这将导致路由器转换为 App.LoadingRoute 路由，直到 promise 解决（可用于加载指示条/轮子等）。
当 promise 解决时，App.LoadingRoute 将被停用，并且原始路由的 setupController 方法将被调用。
这适用于 ember-data 承诺、JQuery 的 $.ajax 承诺和 ember-model 的 fetch 承诺。
只需确保在解决承诺后返回实际模型即可。
如果 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
        }
}

希望这可以帮助。

于 2013-08-07T15:10:57.563 回答
3

我设法通过在 ApplicationRoute 中使用嵌套的 Promises 和 afterModel 方法来完成这项工作。

App.ApplicationRoute = Ember.Route.extend({

    model: function() {

        // load the reservation (a globally needed model)
        return App.Reservation.fetch().then(function(reservations) {
            return reservations.get('firstObject');
        });

    },

    afterModel: function() {

        // Load all other globally needed models
        var self = this;
        return App.Gender.fetch().then(function(genders) {
            self.controllerFor('application').set('genders', genders);
            return App.FilterAttribute.fetch().then(function(filterAttributes) {
                self.controllerFor('application').set('filterAttributes', filterAttributes);
                //return App.SomeOtherModel...
            });
        });

    },

    setupController: function(controller, model) {
        controller.set('reservation', model);
    }

});

完美运行 :-) 应用程序保留在 LoadingRoute 中，直到加载所有记录。请注意，我使用的是Ember Model，但这应该没有什么区别，它只需要返回一个 Promise。

于 2013-09-16T12:21:33.813 回答