Update

Question

112

EmberJS: How to load multiple models on the same route?

rated 0 times [ 116] [ 4] / answers: 1 / hits: 25470 / 11 Years ago, wed, december 11, 2013, 12:00:00

While I am not new to web development, I am quite new to to client-side MVC frameworks. I did some research and decided to give it a go with EmberJS. I went through the TodoMVC guide and it made sense to me...

I have setup a very basic app; index route, two models and one template. I have a server-side php script running that returns some db rows.

One thing that is very confusing me is how to load multiple models on the same route. I have read some information about using a setupController but I am still unclear. In my template I have two tables that I am trying to load with unrelated db rows. In a more traditional web app I would have just issued to sql statements and looped over them to fill the rows. I am having difficulty translating this concept to EmberJS.

How do I load multiple models of unrelated data on the same route?

I am using the latest Ember and Ember Data libs.

Update

although the first answer gives a method for handling it, the second answer explains when it's appropriate and the different methods for when it isn't appropriate.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mikael

Add To Favorites

Follow

Total Points: 73

Total Questions: 115

Total Answers: 86

Location: Central African Republic

Member since Mon, Aug 10, 2020

4 Years ago

answered 11 Years ago kinsley · Accepted Answer

NOTE: for Ember 3.16+ apps, here is the same code, but with updated syntax / patterns: https://stackoverflow.com/a/62500918/356849

The below is for Ember < 3.16, even though the code would work as 3.16+ as fully backwards compatible, but it's not always fun to write older code.

You can use the Ember.RSVP.hash to load several models:

app/routes/index.js

import Ember from 'ember';



export default Ember.Route.extend({

  model() {

    return Ember.RSVP.hash({

      people: this.store.findAll('person'),

      companies: this.store.findAll('company')

    });

  },



  setupController(controller, model) {

    this._super(...arguments);

    Ember.set(controller, 'people', model.people);

    Ember.set(controller, 'companies', model.companies);

  }

});

And in your template you can refer to people and companies to get the loaded data:

app/templates/index.js

<h2>People:</h2>

<ul>

  {{#each people as |person|}}

    <li>{{person.name}}</li>

  {{/each}}

</ul>

<h2>Companies:</h2>

<ul>

  {{#each companies as |company|}}

    <li>{{company.name}}</li>

  {{/each}}

</ul>

This is a Twiddle with this sample: https://ember-twiddle.com/c88ce3440ab6201b8d58