Ember.js - How to bind a view to a controller instance created by the router

Question

I'm using the latest build of Ember.js. I have an Ember app that displays a bar chart using flot.js. A view is bound to a singleton Object Controller to dynamically update the chart. I have a simple jsbin demo of this working here: http://jsbin.com/edosaf/2/edit. Note that this demo creates the cardController Object instead of extending it. Here is the relevant code:

App.cardController = Ember.ObjectController.create({
  id: 1,
  name: 'Visa',
  chartData: [ [2011, 450], [2012, 550], [2013, 320] ]
});

App.ApplicationView = Ember.View.extend({
    templateName: 'application',
    chartValuesBinding: 'App.cardController.chartData'
});

I need to change the above code to extend the cardController instead of creating it while still binding it to the view.

I want to expand on this demo using different bar chart data based on the card_id passed into the url. The routing will look like #/card/:card_id. I am confused with how to bind my ChartView to different instances of my Card ObjectController. My thought is to have a Cards ArrayController to manage all of the credit card objects. Then have a Card ObjectController for managing the active card which will be bound to the ArrayController and also the ChartView.

Binding: Cards ArrayController => Card ObjectController => Chart View

I created another jsbin that attempts to implement the desired routing and a Cards ArrayController (app does not work): http://jsbin.com/edosaf/4/edit

How can I bind a view to a controller instance created by the ember router? With this example, how would you recommended architecting the ember app to bind the CardController Object to the ChartView using the routing #/card/:card_id?

Answer 1

How can I bind a view to a controller instance created by the ember router?

Typically each of your views has a matching controller singleton. For example, within ApplicationView you can access the singleton ApplicationController via the controller property.

Whenever you need to access something else from the view, it should be done via it's controller. Then use needs array to connect controllers.

ApplicationController = Ember.Controller.extend({
  needs: ['card']
});

ApplicationView = Ember.View.extend({
  chartValuesBinding: 'controllers.card.chartData'      
});