Ember.js linkTo helper not linking correctly

Question

I have an Ember.js application with a navbar at the top. One of the buttons goes to /home while another goes to /book/:id/overview. If I'm on the /home page, the button renders fine. If I hover over the button, I can see that the link will take me to /book/2/overview. If I copy the link location and paste it into the address bar, it will take me to /book/2/overview. BUT, if I simply click the link, I get taken to /book/undefined/overview. The link is clearly pointing to the right location, yet Ember.js is taking me to the wrong one. (Or more specifically, it doesn't seem to be finding the model, even though it finds it just fine if I manually type in the ID.)

What could possibly be going wrong?

(I'll post some code as soon as I know the relevant bits. It seems like it could be so many things at this point.)

The model to URL serialization is done using your route's serialize method. If the id property of the model you need a custom serialize implementation. But if you are getting the correct URL on hover, this should just work. Try verifying that the model you are passing to linkTo has an id. — Darshan Sawardekar

Scott Nedderman Scott Nedderman · Accepted Answer · 2013-07-19T05:58:45

When you click the link, as opposed to loading it through the URL in the browser, your route's model function is not called and instead, the model provided in the link is passed directly to setupController. Perhaps you're doing something odd in there.

Here's the comment for model() in the Ember code:

Note that for routes with dynamic segments, this hook is only
executed when entered via the URL. If the route is entered
through a transition (e.g. when using the `linkTo` Handlebars
helper), then a model context is already provided and this hook
is not called. Routes without dynamic segments will always
execute the model hook.

This hook follows the asynchronous/promise semantics
described in the documentation for `beforeModel`. In particular,
if a promise returned from `model` fails, the error will be 
handled by the `error` hook on `Ember.Route`.

Ember.js linkTo helper not linking correctly

1 Answers