Ember:为相互依赖的对象获取数据

Question

我正试图用Ember为度量工具构建一个前端。到目前为止，我编写的代码受到了Eviltrout的emberredit应用程序的很大影响

https://github.com/eviltrout/emberreddit

目标是拥有两个相互依赖的类：度量和过滤器。

1） 一旦应用程序初始化，过滤器（Filter类的实例）就会从服务器加载。一旦加载了过滤器，它们就会在屏幕上显示为复选框。之后，metrics对象应该将过滤器作为参数，并向服务器查询数据。

2） 一旦用户更改了复选框，从而更新了过滤器对象，应用程序就应该再次将过滤器作为参数，并从服务器获取新的度量数据。

我的问题是，我不知道如何使用异步ajax调用来处理这两组对象之间的依赖关系。在当前状态下，当我的应用程序已经开始加载度量时，它还没有完成过滤器的加载。因此，过滤器不会作为metrics ajax调用的参数传递。

我的问题是：这个余烬最好的方法是什么？当然，必须有一种方法来处理ajax调用的顺序。我的直觉是，手动添加观察者不是一种可行的方法。

以下是我的应用程序模型：

//FILTER MODELS
var defaultFilters = ['dates', 'devices'];
//set Filter class. The Filter object will be multiplied for each filter.
App.Filter = Ember.Object.extend({
    //capitalize first letter to get title
    filterTitle: function() {
        return this.get('id').charAt(0).toUpperCase() + this.get('id').slice(1);
    }.property('id'),
    //set attribute to see if filter has loaded
    loadedFilter: false,
    //create method to load filter values from server
    loadValues: function() {
        var filter = this;
        return Ember.Deferred.promise(function (p) {  
            if (filter.get('loadedFilter')) { 
                p.resolve(filter.get('values'));
            } else {
                p.resolve($.getJSON("http://127.0.0.1:13373/options/" + filter.get('id')).then(function(response) {
                var values = Ember.A();
                response[filter.get('id')].forEach(function(value) {
                    values.push(value);
                });
                filter.setProperties({values: values, loadedFilter: true});
                return values;
                }))
            }})}
    }  
);

//reopen class to create "all" method which returns all instances of Filter class
App.Filter.reopenClass({
    all: function() {
        if (this._all) {return this._all; }
        var all = Ember.A();
        defaultFilters.forEach(function(id) {
            all.pushObject(App.Filter.create({id: id}));
        });
        this._all = all;
        return all;
}});
//Create a Filters array to store all the filters.
App.Filters = App.Filter.all();
//METRIC MODELS
App.Metric = Ember.Object.extend({
    metricTitle: function() {
        return this.get('id').charAt(0).toUpperCase() + this.get('id').slice(1);
    }.property('id'),
    loadedMetric: false,
    filtersBinding: 'App.Filters',
    loadValues: function() {
    var metric = this;
    var filters = metric.get('filters');
    if (filters.get('loadedFilters'))
    console.log('loading metrics'); 
    return Ember.Deferred.promise(function (p) {  
        if (metric.get('loadedMetric')) { 
            p.resolve(metric.get('values'));
        } else {
            p.resolve(
                console.log('sending ajax'),
                $.ajax({ 
                url: "http://127.0.0.1:13373/" + metric.get('id') + "/",
                data: JSON.stringify(metric.get('filters')),
                }).then(function(response) {
            var values = Ember.A();
            response[metric.get('id')].forEach(function(value) {
                values.push(value);
            });
            metric.setProperties({"values": values, "loadedMetric": true});
            return values;
            }))
        }})}

});
App.Metric.reopenClass({

    findByView: function(searchView) {
        if (this._metrics) {return this._metrics; }
        var metrics = Ember.A();
        defaultMetricsSettings.forEach(function(metric) {
            if (metric.view == searchView)
                metrics.pushObject(App.Metric.create({id: metric.id},{view: metric.view}, {calculation: metric.calculation}, {format: metric.format}, {width: metric.width}));
        });
        this._metrics = metrics;
        return metrics;
    }
});

以下是路线：

App.ApplicationRoute = Ember.Route.extend({
    //set application routes model to all filters
    model: function() {
        return App.Filter.all();
    },
    //after filter has loaded, let's load its values
    afterModel: function(model) {
        return model.forEach(function(item) {
            item.loadValues();
        });
    },
    //create a controller called ApplicationController and pass the filter as its model
    setupController: function(controller, filter) {
        controller.set('model', filter);
    }
});
App.DashboardRoute = Ember.Route.extend({
    model: function() {
        return App.Metric.findByView('Dashboard');
    },
    afterModel: function(model) {
        return model.forEach(function(item) {
            item.loadValues();
        });
    },
    setupController: function(controller, metric) {
        controller.set('model', metric);
    }
});

控制器：

App.ApplicationController = Ember.ArrayController.extend({
    //ApplicationController controls all the filters. Let's create a controller to handle each instance of a filter
    itemController: 'filter'
});
App.FilterController = Ember.ObjectController.extend({
    //this sets the titleId property that is used only for binding html attributes in template. Stupid way to do this.
    titleId: function() {
        return "#" + this.get('filterTitle');}.property('filterTitle')
});

Answer 1

您的afterModel钩子可以在一系列依赖承诺中执行此操作。当前的实现立即返回，相反，您将promise链接起来，最后返回最后一个promise作为钩子的结果。路由器将等待整个呼叫集完成，然后继续到setupController。

afterModel: function(model) {
  var promise;
  model.forEach(function(item)) {
    if (promise) {
      promise = promise.then(function() {
        item.loadValues();
      });
    } else {
      promise = item.loadValues();
    }
  }
  return promise;
}

我不确定您有多少个调用，但您可能希望将其中一些调用批处理在一起，以减少HTTP请求的数量。