Emberjs loading multiple controllers into one

Question

SCENARIO
I currently have an IndexRoute. I want to load 3 other controllers into it. Those 3 other controllers are called Sports

Answer 1

I have another answer that solves this problem in a more modular approach

In my original solution
I was under the assumption that each controller has it’s own route and that route would deal with returning the data for that controller. So if you you included all 3 controllers each of them would deal with getting it’s own model. But I had the wrong assumption. I re-read the “note on coupling” in embersjs http://emberjs.com/guides/controllers/ .

So what I got from that documentation is the route is responsible for getting all models but you have to tell it to assign it to the additional controllers in that route. I also read up on models and fixtures http://emberjs.com/guides/models/the-fixture-adapter/

My new solution

• Got rid of the extra routes (for now)
• Added Ember Data with fixture data
• I still kept {{ outlet }} I used the “setupController” hook in the IndexRoute to connect the outside controllers with the correct data. This is key

The reason for this approach is I might want to use those controllers “news”,”business”, “sports” somewhere else in the UI. I could potential even set up their own routes in the future and I think by using the ember data and models now will help.

See JSBIN solution
note this solution works on my desktop but the JSBIN is throwing some weird Script 0 error http://jsbin.com/gecarido/5/edit