Ember.js: Reloading a .hasMany relationship given through "links" in payload

Question

Say I have two models, Topic and Post:

App.Topic = DS.Model.extend({   posts: DS.hasMany('post', { async: true, inverse: 'post' }); });  App.Post = DS.Model.extend({   topic: DS.belongsTo('topic', { async: true }); }); 

Topic hasMany Posts, and a Post belongsTo a Topic.

To load the data from the API, one initial call is made (which fetches a topic... topic ID 2 for example): GET /topics/2

After receiving the payload for this GET request, the serializer then appends a links key to the payload. This has the route to load the Posts associated with the topic:

"topic": {    "id": 2,    "links": {       "posts": "/topics/2/posts"    } } 

This second request (to /topics/2/posts) is how the Posts are loaded and attached to the topic.

This all works fine when the page is first loaded.

The problem occurs when a Post is created during a page session. While I can get the topic itself to reload (by calling .reload() on the model object that represents the topic), the Posts associated with the topic are not reloaded. The second API call (to get the posts) is never even made, while the first call (to get just the topic) is made. If I refresh the page, the posts I created on the previous page load will load (but of course, if I then go and make some more posts, they won't show up until the next page load).

Looking for a solution, I came across this question: How to reload an async with links hasMany relationship?

However, it appears that the solution no longer works for the current versions of Ember/Ember-Data. The JSFiddle provided does not function.

So, how can I reload this sort of hasMany relationship? Any help is greatly appreciated.

Answer 1

DS.Model.reopen({   reloadLink: function (linkKey) {     if ($.isArray(linkKey)) {       var promises = [];       for (var i = 0; i < linkKey.length; i++) {         promises.push(this.reloadLink(linkKey[i]));       }       return Em.RSVP.all(promises);     } else {       var rel = this._relationships[linkKey];       if (rel) {         if (rel.reload) {           return rel.reload();         } else if (rel.fetchLink) {           return rel.fetchLink();         }       }     }   } }); 

Example:

model: function () {     var model = this.modelFor('_some_model_');     return model.reloadLink(['link1', 'link2']).then(function () {       return model;     }); }