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, News, Business. I read the embersjs documentation and it states that you need to implement the renderTemplate hook into the IndexRoute for each of those controllers to be shown in the index. http://emberjs.com/guides/routing/rendering-a-template/

Once I did that I put in the index template

{{ outlet sports }}
{{ outlet news }}
{{ outlet business }}

They are showing up but as I look through the EmberInspector extension the individual model for Sports, News, Business are not loading.

QUESTION
Why are the models for these Sports, News, Business not loading in the index?

SEE JSBIN for my code sample
http://jsbin.com/gecarido/1/edit

ATTACHED IMAGE

Answer 1

route's are only hit when you define and hit a route via url.

For example if you'd defined your router like this:

Ember.Router.map(function(){
  this.resource('foo', function(){
    this.resource('bar');
  });
});

And hit /foo/bar

It would hit

App.FooRoute = Em.Route.extend({

});

and

App.BarRoute = Em.Route.extend({

});

If you want to hit it all from just the root url you might as well return it all from the application model hook.

App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    return {
      colors: ['red', 'yellow', 'blue'],
      news: ['Europe', 'Asia', 'America'],
      business: ['Markets', 'Finance', 'Stocks'],
      sports: ['golf', 'hockey', 'football']
    };
  }  
});

And then you can use render from the template and supply it a template name and a model.

<script type="text/x-handlebars">
  <h2>Welcome to Ember.js</h2>

  <ul>
  {{#each item in colors}}
    <li>{{item}}</li>
  {{/each}}
  </ul>

  <br>
  {{render 'sports' sports}}
  <br>
  {{render 'news' news}}
  <br>
  {{render 'business' business}}
  <br>
  {{outlet}}
</script>

http://jsbin.com/gecarido/3/edit

Answer 2

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