Ember error while loading asynchronous routes

Question

I'm loading data from a JSON API. My routes almost always need to fetch new data from the server. I don't have control over the API format.

I'm trying to use the functionality described in the Ember Asynchronous Routing guide. Specifically, I'm returning a promise in the route's model hook so that I delay transitioning to the route until the data has loaded (and display a loading indicator in the meantime).

Everything (actions.loading, afterModel, etc.) seemed to be working as described in the guide. However, I get a showstopper error whenever I transition to a route I've been to before.

This JSBin is a minimal example that uses the same versions of the Ember and its dependencies that is included in the Starter Kit:

http://jsbin.com/zorey/1/edit?html,js,output

Click the first name, go back, and then click the second name. You'll see this error in your console:

Error while loading route: TypeError: Object #<Object> has no method 'apply'

What am I doing wrong?

taken from the ember doc: Note: A route with a dynamic segment will only have its model hook called when it is entered via the URL. If the route is entered through a transition (e.g. when using the link-to Handlebars helper), then a model context is already provided and the hook is not executed. Routes without dynamic segments will always execute the model hook. URL: emberjs.com/guides/routing/specifying-a-routes-model — fanta
@fanta Thanks! So then what's the right way to do this? And why does it work the first time you enter the route? — No Surprises

Jake Haller-Roby Jake Haller-Roby · Accepted Answer · 2014-02-13T03:28:45

Looking at your jsBin, the issue is right here:

afterModel: function(response, transition) {
    this.set('model', response);
    console.log('DONE LOADING');
}

You should never set the model in the "afterModel" hook. Not only is it unnecessary (the model gets set by the return value in the "model" hook), but it can cause some messy issues with the hook patterns.

Just remove the

this.set('model', response);

line and you should be golden.

Ember error while loading asynchronous routes

1 Answers