1

这个问题是我上一个问题的后续：Architecture for reusable object in ember

在我的应用程序中，我使用Ember.Component. 所有图表的日期范围由Daterangepicker具有自己的控制器等的 a 控制。现在每个图表的数据都在 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'
  }),
 });

索引.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 为我的图表获取数据的正确方法是什么？

4

1 回答 1

0

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

在我的一些应用程序中，我需要 URL 来控制日期范围（例如特定月份）。在这些情况下，我会创建一个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，并将这些数据提供给我的图表。

我在 github 上有一些代码，还有一个演示。我很想听听你的想法。

于 2013-09-05T01:17:30.833 回答