Ember 数据和 Ember 状态管理器答案

【问题标题】：Ember data and Ember StateManagerEmber 数据和 Ember 状态管理器
【发布时间】：2012-05-16 10:04:27
【问题描述】：

我有一个应用程序，它使用 ember-data 来保存数据并使用 StateManager 来驱动其全局状态。由于加载数据是异步的，我想知道如何捕获表示所有数据都已加载的事件。准确地说，我有一个名为“正在加载”的状态，我在其中加载数据：

App.store.find(App.Model, ....)

加载模型后，我会进行一些后期处理。这是在名为“后处理”的“加载”子状态中完成的。当每个模型都收到“didLoad”事件时，我会过渡到“后处理”：

App.Model = DS.Model.extend {
   didLoad: ->
     stateManager.send('postProcess',this)
}

当每个数据都被加载和后处理时，应用程序应该转换到另一个与“正在加载”处于同一级别的“编辑”状态：

      loading -> postprocessing
root /
     \
      editing

我应该捕捉什么事件来实现转换？ ember-data Store 有回调吗？

【问题讨论】：

标签： ember.js ember-data

【解决方案1】：

使用 ember-data 时，find 方法返回一个数组代理。您可以观察该对象上的 isLoaded 字段。

var data = App.store.find(App.Model, {});
data.addObserver('isLoaded', function() {
    if (data.get('isLoaded')) {
        ....
    }
});

但请记住通过 removeObserver 清理您的观察者。

我将此实用程序添加到内置的 ember-data 记录数组中。

DS.RecordArray.reopen({
    onLoad: function(callback) {
        if (this.get('isLoaded')) {
            callback(this);
        } else {
            var that = this;
            var isLoadedFn = function() {
                if (that.get('isLoaded')) {
                    that.removeObserver('isLoaded', isLoadedFn);
                    callback(that);
                }
            }

            this.addObserver('isLoaded', isLoadedFn);
        }

        return this;
    }
}

所以现在你可以做

App.store.find(App.Model, {}).onLoad(function(data) {
    ....
});

你也可以这样做

init: function() {
    this.set('data', App.store.find(App.model, {}));
},

onData: function() {
    if (this.get('data.isLoaded')) {
        ...
    }
}.observes('data.isLoaded')

【讨论】：

【解决方案2】：

尝试在模型的 arrayController 中观察“content@each.isLoaded”并调用 stateManager.sent(“editing”)。比如：

App.ModelArrayController.reopen({
    didLoadAllContent: function () {
        if (content.everyProperty('isLoaded')) {
            stateManager.transitionTo('editing');
        }
    }.observes("content.@each.isLoaded")
)}

当然，这可能是一种更简单的方法。或者也许是更正确的一个......

【讨论】：

【解决方案3】：

通常，模型的状态将由 Route 处理。

模型挂钩执行 store.find。 http://emberjs.com/api/classes/Ember.Route.html#method_model

afterModel 钩子将在路由模型解析（加载）后被调用。 http://emberjs.com/api/classes/Ember.Route.html#method_afterModel

【讨论】：