CODEWITHSUNDEEP
ember.jsember-data
Adam Krawesky
Adam Krawesky

Reputation: 1353

why am i seeing "error while loading route" with ember?

ember rc1, ember-data rev 12. all my other routes load correctly, unsure why i'm seeing this error. it happens when i try to access the show route i.e. /files/groups/5. the index route renders fine.

i've pasted the stack trace below but it's not very informative. is there something basically wrong i'm doing here?

my routes/controllers are set up as follows:

this.resource('files', { path : '/files' }, function() {      
  this.resource('groups', { path : '/groups' }, function() {      
    this.route('show', { path : '/:asset_link_group_id' });      
  });
});

AssetLinksApp.GroupsShowController = Ember.ArrayController.extend({
  content : Ember.A(),
  assetLinkGroup : null
});

AssetLinksApp.GroupsShowRoute = AssetLinksApp.AuthRequiredRoute.extend({
  setupController : function(controller,model) {    
  controller.set('content',model.get('asset_links'));
  controller.set('assetLinkGroup',model);
  },
  model : function(params) {    
    return AssetLinksApp.AssetLinkGroup.find(params.asset_link_group_id);
  }
});

the stack trace:

Error while loading route: TypeError {} exchange_vendor.js:12078

(anonymous function) exchange_vendor.js:12078 Ember.Router.reopenClass.defaultFailureHandler.setup exchange_vendor.js:35011 failure exchange_vendor.js:34448 objects.concat.context exchange_vendor.js:34497 invokeCallback exchange_vendor.js:17846 Promise.then exchange_vendor.js:17893 EventTarget.trigger exchange_vendor.js:17822 results exchange_vendor.js:17924 RunLoop._prev exchange_vendor.js:15911 Ember.handleErrors exchange_vendor.js:12140 invoke exchange_vendor.js:15909 iter exchange_vendor.js:15981 RunLoop.flush exchange_vendor.js:16035 RunLoop.end exchange_vendor.js:15940 tryable exchange_vendor.js:16143 Ember.tryFinally exchange_vendor.js:12831 Ember.run.end exchange_vendor.js:16146 Ember.tryFinally exchange_vendor.js:12833 Ember.run exchange_vendor.js:16102 Ember.HashLocation.Ember.Object.extend.onUpdateURL exchange_vendor.js:36690 jQuery.event.dispatch exchange_vendor.js:3144 jQuery.event.add.elemData.handle.eventHandle

Upvotes: 0

Views: 4001

Answers (1)

Teddy Zeenny
Teddy Zeenny

Reputation: 3971

The model returns a single record. However you have defined an ArrayController.

Ember.js automatically places the model in the controller's content property, which will cause an error since it will be putting a single record in an array controller.

Even though you overrode the setupController, before it fires, Ember.js will place the model in the controller anyway. There's currently no way of stopping that.

Update 3-June-2014 (Ember > 1.0) :

If you now override setupController Ember no longer sets the model property.

The only solution I can think of is to add a resource to your routes:

this.resource('files', { path : '/files' }, function() {      
  this.resource('groups', { path : '/groups' }, function() {      
    this.resource('group', { path : '/:asset_link_group_id' }, function() {
      this.route('index');
    });      
   });
});

This means that you have an object controller (GroupController) containing the group, and an array controller (GroupIndexController) containing the asset links array.

AssetLinksApp.GroupIndexController = Ember.ArrayController.extend({
  assetLinkGroup : null
});

AssetLinksApp.GroupIndexRoute = AssetLinksApp.AuthRequiredRoute.extend({
  setupController : function(controller,model) {    
    controller.set('content',model);
    controller.set('assetLinkGroup', this.modelFor('group'));
  },
  model : function(params) {    
    return this.modelFor('group').get('asset_links');
  }
});

Now your template should be named group/index instead of groups/show. As for group template, it can be an empty template containing {{outlet}}.

Most important thing to note from this is: If your controller is an object controller, you have to return an object from the model hook, and if your controller is an array controller, then you have to return an array from the model hook.

The bright side is, this pushes you to follow a certain design that I and probably the core team think is better.

Upvotes: 5

Related Questions