ember.js charts view backed with data from the server

Question

I am trying to do the following with ember.js

I want a single route to display twice the same view which represents a google pie chart.

I defined my view and coded the template like this

{{view App.MyView identifier:1}}
{{view App.MyView identifier:2}}

I want each of this view to query the server for a specific resource and get the chart data from there. Let's say

/charts/1.json
/charts/2.json

But both of these views have the same controller, inherited from the single route.

I don't know how to back each view with its own set of data ...

I am using ember.js 1.0.0.rc6 with ember-data 0.13 and ember-rails 0.12.0 at the moment.

I am doing things correctly here ?

Darshan Sawardekar Darshan Sawardekar · Accepted Answer · 2013-06-28T05:33:36

You can use the {{control}} helper to render with a fresh controller instance every time.

However this may not be be what you need here. It appears to me you have /charts Route that has charts data from /charts/1..N.json. But you want to show the individual charts without going to a /charts/1.. Routes. ie:- the charts render at /charts itself.

One way to model this is to load the list of charts via /charts Route. And the charts template render the charts within an #each or manually with render.

If your /charts api call returns data for each chart, you are done, you simple render that data in the chart template passing the data to the custom View.

If the chart data is separate and not part of /charts then you will need to load it separately in the ChartController and then pass it to the custom View.

I made a basic jsbin with this idea.

ember.js charts view backed with data from the server

1 Answers