Load Data Belonging To A Parent Model With Ember.js

Considering something similar to the example outlined here: App.Router.map(function() { this.resource('posts', function() { this.resource('post', { path: '/posts/:post_id' },

Solution 1:

You just need to declare your CommentsRoute like this:

App.CommentsRoute = Ember.Route.extend({
  model: function() {
    returnthis.modelFor('post').get('comments');
  }
});

What it does is, it gets the model of the PostRoute and fetches its comments.

Ember-data handles the logic behind it. If comments were sideloaded, it will just return these. Otherwise it will issue a GET request to fetch them.

For this to work, you need to include the links property on a serialized post. The links property needs to include the URL you wish ember-data to use in order to fetch the comments.

E.g. your serialized post may look like this:

{"post":{"id":1,"title":"Rails is omakase","links":{"comments":"/posts/1/comments"}}}

See DS.RESTAdapter#findHasMany.

The hasMany relationship probably needs to be declared async for this to work properly:

App.Post = DS.Model.extend({
  comments: DS.hasMany('comment', { async: true })
});

Solution 2:

You can use Ember's sideloaded relationships to make the posts API endpoint also return the relevant comments and Ember will figure it out.

http://emberjs.com/guides/models/the-rest-adapter/#toc_sideloaded-relationships

{"post":{"id":1,"title":"Node is not omakase","comments":[1,2,3]},"comments":[{"id":1,"body":"But is it _lightweight_ omakase?"},{"id":2,"body":"I for one welcome our new omakase overlords"},{"id":3,"body":"Put me on the fast track to a delicious dinner"}]}

You'd then be able to pass the already loaded comments to the comments route.

It may be in the docs but it's quite a specific term! Some of the concepts like that can be a bit tricky to search for.

Solution 3:

The following forces a call to the backend /comments?post_id=ID

App.CommentsController = Ember.ArrayController.extend({
  needs: 'post'
});

App.CommentsRoute = Ember.Route.extend({
  model: function(params) {
    returnthis.store.find('comment', { post_id: this.modelFor('post').get('id') });
  }
});