Ember: use controller data on a route or how to get data correctly

Question

This question is a continuation of my previous question: Architecture for a reusable object in ember

In my application, I create several diagrams using Ember.Component . Daterange for all charts is controlled by Daterangepicker , which has its own controller, etc. Now the data for each chart is retrieved in IndexRoute (with ajax call), and the daterange is passed in the query string.

The problem is that I cannot figure out how to access daterange from IndexRoute. Here is my code:

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', }); 

I have to admit that this setting seems weird. So, ultimately, my question is: What will be the correct way to get data for my charts based on startDate and endDate set in my DatePickerController?

Answer 1

I am also struggling with this problem.

In some of my applications, I need a URL to control the date range (for example, a specific month). In these cases, I would create a MonthRoute and a MonthModel - think of it as a monthly report. MonthModel has the MonthModel property of the actual data that I wanted to display:

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

The date sensor will allow the user to enter a new route that will display (say) the model of the month Jan-2013

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

Then I installed the embedded company data on my CompaniesController in the hook setupController :

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

Then I would do various array manipulations on my CompaniesController and make this data available to my diagrams.

I have code for this on github as well as a demo . I would be interested to hear your thoughts.