Ember Routing - Model hook not called on page refresh

Question

I am trying to use nested routing to render a collection first. Once the collection is rendered, clicking on an item (using link-to) renders that particular item in the outlet. This all works fine so far.

I am having a problem where refreshing the page doesn't call the 'model' hook of my nested resource though.

From Ember's website at http://emberjs.com/guides/routing/specifying-a-routes-model/:

What happens if the user visits your application directly with a URL that contains a dynamic segment? For example, they might reload the page, or send the link to a friend, who clicks on it. At that point, because we are starting the application up from scratch, the actual JavaScript model object to display has been lost; all we have is the ID from the URL.

Luckily, Ember will extract any dynamic segments from the URL for you and pass them as a hash to the model hook as the first argument

Here is my code:

Admin.Workqueues.App.Router.map(function () {
  this.resource('delinquencies', function () {
    this.resource('delinquency', {
      path: '/:id'
    });
  });
});

Admin.Workqueues.App.DelinquenciesRoute = Ember.Route.extend({
  model: function () {
    // Does XHR here and fetches a collection of items to render.
    // Returns a promise
  }
});

Admin.Workqueues.App.DelinquencyRoute = Ember.Route.extend({
  model: function (params) {
    debugger; // This doesn't get called
  }
});

So with this code, going to /delinquencies lists the entire collection. Clicking on an item opens a delinquency object at /delinquencies/3 but now refreshing the page doesn't call the model hook of delinquency route.

I am not sure what I am missing. Any ideas? If it matters, I am using:

Ember : 1.2.0

Ember Data : 1.0.0-beta.7+canary.f482da04

Handlebars : 1.1.1

And you're hitting delinquencies/7 or something like that? — Kingpin2k
Is there anything else in your delinquencies route that redirects, or is the code above the code currently being used? Are you sure the DelinquencyRoute is actually included in the page and Ember isn't creating a dummy route for you? — Kingpin2k
I am not redirecting explicitly at all. For your second question on whether Ember is perhaps creating a dummy route, I don't think so because everything works fine by clicking on items in the collection. — Rajat
Have you tried using the Ember inspector for Chrome or Firefox to inspect the route and make sure you're on the one you think it is? — Peter Brown
@Rajat you don't need the route to transitionTo and link-to, in this example I'm linking to color without the color route, but if I were to refresh it'd have the same problem that yours does emberjs.jsbin.com/OxIDiVU/315/edit — Kingpin2k

Dennis Dennis · Accepted Answer · 2014-07-09T20:22:30

You shouldn't define the resource as a child resource but as a separate one.

Admin.Workqueues.App.Router.map(function () {
  this.resource('delinquencies', function () {});
  this.resource('delinquency', { path: '/:delinquency_id' });
});

The reason your code works right now is because the link-to helper already provides the context so the model hook never gets called.

For the model hook in the DelinquencyRoute you should use something like this:

return this.store.find('delinquency', params.delinquency_id);

For more info, have a look at the guides and getting started tutorial: http://emberjs.com/guides/routing/defining-your-routes/ (the dynamic segments section answers your question)

Ember Routing - Model hook not called on page refresh

1 Answers