CODEWITHSUNDEEP
ember.jsember-data
ken
ken

Reputation: 8993

model hook failing browser reload

I have a nested route that is setup as:

this.resource('actions', { path: '/actions' }, function() {
    this.route("action", {path: ':id'});
});

When I go to the /actions URL state it calls the model() of ActionsIndexController and successfully retrieves all of the records in "actions". If I reload at this point it also works fine, reloading all the records. The problem is when transitioning to a sub-route. When on the index page and transitioning to /actions/[action-id] the page loads as expected but when on that page if you reload the page -- which of course means the local state for Actions is gone -- it fails.

Here's the model hook in the ActionsActionRoute:

model: function(params) {
    console.log(params);
    return this.store.find('Action',params.id);
}

Interestingly in both use cases -- when you initially navigate to this URL and when you press reload in the browser -- it runs the model hook and the console statement gives a result of:

Object {id: "action-id", queryParams: Object}

The properties appear to be exactly the same yet in the reload scenario I gives the error:

Error while loading route: TypeError: Cannot read property 'id' of undefined at DS.Store.Ember.Object.extend.push (http://my.server.com/myApp/javascripts/vendor.js:71617:77)

Can anyone help me get me get over this gotcha?

Upvotes: 0

Views: 226

Answers (1)

Steve H.
Steve H.

Reputation: 6947

In your Router, you specify the nested path as a route instead of a resource.

From the Ember guide:

NOTE: You should use this.resource for URLs that represent a noun, and this.route for URLs that represent adjectives or verbs modifying those nouns. For example, in the code sample above, when specifying URLs for posts (a noun), the route was defined with this.resource('posts'). However, when defining the new action (a verb), the route was defined with this.route('new').

In your case, /action/:id represents a resource, not a route from the parent resource. I suggest you change your code as follows:

this.resource('actions', { path: '/actions' }, function() {
    this.resource("action", {path: ':id'});
});

Upvotes: 1

Related Questions