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() {
    return this.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) {
    return this.store.find('comment', { post_id: this.modelFor('post').get('id') });
  }
});