Question

这个问题是对我上一个问题的跟进：Architecture for reusable object in ember

在我的应用中，我使用Ember.Component创建多个图表。所有图表的日期范围由Daterangepicker控制，它有自己的控制器等。现在每个图表的数据都在IndexRoute（带有ajax调用）中获取，日期范围在查询字符串中传递

问题在于我似乎无法弄清楚如何从IndexRoute访问日期范围。这是我的代码：

IndexRoute.js

App.IndexRoute = Ember.Route.extend({

  model: function(){

    var that = this;

    return Ember.Object.extend({
      registrationsData: null,
      registrations: function() {

        var self = this;

        $.ajax({
            url: Routing.generate('ysu_user_api_statistics_registrations', {startDate: that.dateRange.startDate, endDate: that.dateRange.endDate}),
            success: function(data) {

                var labels = [];
                        var values = [];

                        var chartData = {
                            labels : data.labels,
                            datasets : [
                            {
                                data : data.values,
                            }
                            ],
                        };

                        self.set('registrationsData', chartData);

                    }
                });
        }.property(),
    }).create();

  },
    dateRange: Ember.Object.create({
        id: 1,
        startDate: '2013-08-01',
        endDate: '2013-08-31'
  }),
 });

Index.hbs

{{ my-chart title="Registrations" dataBinding=model.registrations registrationsDataBinding=model.registrationsData}}

MyChartComponent.js

App.MyChartComponent = Ember.Component.extend({
  ...
  dataBinding: null,
  registrationsDataBinding: null,
  dateRangeBinding: null,
  modelDateRangeBinding: null,
  chartContext: null,
  myChartController: null,
  didInsertElement: function() {

    /* Create and set controller */
    if (!this.get('myChartController')) {
      myChartController = new App.MyChartController()
      this.set('myChartController', myChartController);
    }

    this.set('chartContext', $(this.get('element')).find('canvas')[0].getContext("2d"));

  },

  drawChart: function() {

    if(this.get('chartContext')) {

        var ctx = this.get('chartContext');

        var options = {
            bezierCurve : false,
            pointDotRadius : 6,
            pointDotStrokeWidth : 4,
            datasetStrokeWidth : 4,
        }

      var myNewChart = new Chart(ctx).Line(this.get('registrationsDataBinding'), options);

    }

  }.observes('registrationsDataBinding', 'myChartController.dateRange'),

});

MyChartController.js

App.MyChartController = Ember.ArrayController.extend({
    container: App.__container__,
    needs: ['daterangepicker'],
    dateRange: 'controllers.daterangepicker.selectedRange',
    dateRangeBinding: 'controllers.daterangepicker.selectedRange',
});

我必须承认，这种设置感觉有点奇怪。所以最终我的问题是：根据我的DatePickerController中设置的startDate和endDate获取图表数据的正确方法是什么？

Answer 1

我也一直在努力解决这个问题。

在我的某些应用中，我需要使用网址来控制日期范围（例如特定月份）。在这些情况下，我会创建一个MonthRoute和一个MonthModel - 将其视为月度报告。 MonthModel具有我想要绘制的实际数据的hasMany属性：

App.Month = DS.Model.extend({
  companies: DS.hasMany('App.Company')
});

一个日期选择器会让用户输入一条新路线，这将获取（比方说）Jan-2013个月模型

{
  month: {
    id: 'Jan-2013',
    companies: [
      {name: 'Acme, Inc', revenue: 10425, ...},
      ...
    ]
  }
}

然后，我会在CompaniesController挂钩的setupController上设置嵌入式公司数据：

App.MonthRoute = Ember.Route.extend({
  setupController: function(controller, model) {
    controller.set('model', model);
    this.controllerFor('companies').set('model', model.get('companies'));
  }
});

然后，我会对CompaniesController进行各种数组操作，并将这些数据提供给我的图表。

我有一些code for this up on github，还有一个demo。我很想听听你的想法。

Ember：在路由中使用控制器数据或如何正确获取数据

1 个答案: