2

我正在尝试使用 Ember 为度量工具构建前端。到目前为止，我编写的代码深受 Eviltrout 的 emberreddit 应用程序的影响

https://github.com/eviltrout/emberreddit

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

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

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

我的问题是我不知道如何使用异步 ajax 调用来处理这两组对象之间的依赖关系。在当前状态下，当我的应用程序已经开始加载指标时，它还没有完成加载过滤器。因此，过滤器不会作为度量 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')
});
4

1 回答 1

1

你的afterModel钩子可以在一系列依赖的承诺中做到这一点。当前的实现立即返回，而不是链接承诺并最终返回最后一个承诺作为钩子的结果。路由器将等待整个调用集完成，然后再继续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 请求的数量。

于 2013-07-18T12:24:13.523 回答