How to display two models on one EmberJS page?

5
votes

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?

2
ember.js

2 Answers

4
votes

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

0
votes

This jsbin shows another way to display two models: org model (with attributes "name" and "description") and member model (with just the "name" attribute). The JSBin is set up with a local storage adapter where you can enter in data.

handlebars and html:

  Here are the Orgs:
  <ul>
  {{#each model}}
    <li>{{name}} - {{description}}</li>
  {{/each}}
  </ul>

  Here are the Members:
  {{#each member in members}}
    <li>{{member.name}}</li>
  {{/each}}

The key is in the controller:

Javascript:

App.OrganizationRoute = Ember.Route.extend({
  model: function() {
    return App.Org.find();
  },
  setupController: function(controller, model) {
    controller.set('members', App.Member.find());
  }
});

(based on this answer)