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