How to enable page refresh when Ember model loaded in parent route has nested models passed to child routes?

Question

A parent route in an Ember app loads a model from the server. The model is an array with a series of fields, including a field that is itself an array containing the models for the child routes. The model array is displayed in the parent route as a list where each item, when clicked, links to the child route while passing the selected model to the child route.

However, since the child route doesn't load its model from the server but receives it from the parent route, refreshing the page (or sharing the URL) when on the child route yields an error. What is a good way of solving that problem?

Here is a JSBin with an example.

Edu Edu · Accepted Answer · 2013-11-12T10:17:23

You should implement the model hook in your child Routes, and as you are using ember data, use the fixtureAdapter and the store.

An slightly modified JSBin http://jsbin.com/oSUZUvE/2#/documents/1/subdocument/2

App = Ember.Application.create({});

App.ApplicationAdapter = DS.FixtureAdapter;

App.Router.map(function() {
  this.resource('documents', function(){
    this.resource('document', {path: ':document_id'}, function () {
      this.resource('subdocument', {path: 'subdocument/:subdocument_id'});
    });
  });
});

App.ApplicationRoute = Ember.Route.extend({
  redirect: function () {
    this.transitionTo('documents');
  }
});
App.DocumentsRoute =  Ember.Route.extend({
  model: function(){
   return this.get('store').find('document');
  }
}); 
App.DocumentRoute = Ember.Route.extend({
  model: function (params) {
    console.log(params);
    return this.get('store').find('document',params.document_id);
  }
});
App.SubdocumentRoute = Ember.Route.extend({
  model: function (params) {
    console.log(params);
    return this.get('store').find('subdocument',params.subdocument_id);
  }
});

How to enable page refresh when Ember model loaded in parent route has nested models passed to child routes?

1 Answers