Ember.js: Load related multiple models

Question

Since the ember-guides explains how to load mutliple models on a route like that

export default Ember.Route.extend({
  model() {
    return Ember.RSVP.hash({
      songs: this.get('store').findAll('song'),
      albums: this.get('store').findAll('album')
    });
  }
});

Im wondering how to load only the related model-entries from a second one, like loading ALL songs but only the albums which are indexed in the songs if we assume that the song model containing this

...
albums: hasMany('album'),
...

How can I do that?

You should sideload the albums along with the songs, or get the songs in the model hook and query the albums in the afterModel hook using the song ids you got from the model — Patsy Issa, Jul 25 '16 at 15:47

score 2 · Answer 1 · answered Jul 26 '16 at 21:40

Assuming your adapter and JSON API backend support it, you can simply say:

export default Ember.Route.extend({
  model() {
    return Ember.RSVP.hash({
      songs: this.get('store').findAll('song', { include: 'albums' }),
    });
  }
});

Typically, this will generate a GET to /songs?include=albums, which tells the JSON API backend to include the related album resources, according to http://jsonapi.org/format/#fetching-includes.

On the Ember side of things, this feature is documented at http://emberjs.com/blog/2016/05/03/ember-data-2-5-released.html#toc_code-ds-finder-include-code.

If the above isn't an option, then there's no way to load everything in one request without building a custom endpoint and using store.pushPayload.

score 0 · Answer 2 · answered Jul 27 '16 at 09:48

0

Here is one way to do it

export default Ember.Route.extend({
  model() {
    var promise = new Ember.RSVP.Promise(function(resolve,reject){
      this.store.findAll('song').then(function(songs){
        var albumPromises = songs.map(fuction(s){return s.get('album')});
        Em.RSVP.all(albumPromises).then(function(){
           resolve(songs);
        });
      });
    });
    return promise;
  }
});

So Basically you are waiting till everything is resolved.

Hope it helps!

answered Jul 27 '16 at 09:48

vinay pandey

133
4

songs.map(fuction(s){return s.get('album')}); -> Is this returning Promise?explanation required for your answers for better understanding. – Ember Freak Jul 27 '16 at 11:33
1

yes s.get('album') will return promise because its a relationship which will be loaded later. – vinay pandey Jul 28 '16 at 08:12

Ember.js: Load related multiple models

2 Answers2