How to display two models on one EmberJS page?

Question

What is the basic setup for displaying instances of two different models of two different types on one "page"?

For example, I have two models, say, College and Student. Each is stored in a REST server. On a certain route, I want to pull particular instances of each and display the "name" attribute for each.

Coming from the Rails world, I don't quite understand the Model-View-Controller concept of EmberJS. It seems that in EmberJS, each controller can handle just one model type. So does this mean that a separate controller must be used for each type to be displayed?

Answer 1

In ember if you follow the naming convention strictly then your assumption is correct that the best practice is to have a controller per model per view, but in most cases where the requirements are differ you can also diverge from the convention, and to satisfy your needs you could conceptually do something like this:

javascript

var App = Ember.Application.create();

App.IndexRoute = Ember.Route.extend({
  model: function(){
    return Ember.Object.create({post: App.Post.find(1), page: App.Page.find(1)});
  }
});

App.Store = DS.Store.extend({
 revision: 12,
 adapter: 'DS.FixtureAdapter'
});

App.Post = DS.Model.extend({
 title: DS.attr('string'),
 description: DS.attr('string')
});

App.Page = DS.Model.extend({
 title: DS.attr('string'),
 text: DS.attr('string')
});

App.Post.FIXTURES = [
  {
    id: 1,
    title: "My super post",
    description: "Lorem ipsum dolor sit amet..."
  }
];

App.Page.FIXTURES = [
  {
    id: 1,
    title: "My super page",
    text: "Lorem ipsum dolor sit amet..."
  }
];

templates

<script type="text/x-handlebars">
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
  <h2>{{model.post.title}}</h2>
  <p>{{model.post.description}}</p>
  <hr/>
  <h2>{{model.page.title}}</h2>
  <p>{{model.post.description}}</p>
</script>

And here a working jsbin that show's the concept.

Hope it helps