1

この質問は、私の前の質問のフォローアップです: 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'
  }),
 });

索引.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とdemoにあります。あなたの考えを聞きたいです。

于 2013-09-05T01:17:30.833 に答える