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

Question

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

it seems to be something wrong with the model: function() in GroupsShowRoute. if i return a null model, i don't see the error. i realize that that model() function is redundant as the router provides that implementation by default. — Adam Krawesky
– Adam Krawesky, Commented Mar 26, 2013 at 21:35
but i don't see what's wrong with that find() call.. if i try it in the console, it runs successfully and provides a valid Model instance. — Adam Krawesky
– Adam Krawesky, Commented Mar 26, 2013 at 21:36

Teddy Zeenny · Accepted Answer · 2014-06-03 14:18:20Z

5

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.

edited Jun 3, 2014 at 14:18

answered Mar 27, 2013 at 9:56

Teddy Zeenny

3,9711 gold badge20 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adam Krawesky Over a year ago

thank you very much for such a detailed response. now i understand that i've not structured my app very well. i will be rebuilding the structure today.

Adam Krawesky Over a year ago

a followup question regarding app structure: stackoverflow.com/questions/15660598/…

Collectives™ on Stack Overflow

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

1 Answer 1

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

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

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

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related