URL serialization does not work after page refresh

Question

I'm facing a problem with emberJS and the Router.

My route architecture is the one below :

• root
  • index
  • app
    • home
    • item
      • display/:id
      • edit/:id

When I initialy navigate to display/:id the URL is well written as below :

localhost/#/app/item/display/da083d21-afab-4620-8a85-6a4e6bfb95b9

Then I hit the refresh button of my browser and the URL is then written as

localhost/#/app/item/display/undefined

I have the following functions in my route to handle serialize/deserialize

deserialize:  function(router, context) {
    return App.Item.find(context.id);
},
serialize:  function(router, context){
    return { id: context.id };
}

When I log the context passed in serialize :

• before the refresh : it is set to the right item
• after the refresh : it is set to an element that does not contained the id (not my item)

So I guess I'm missing something to serialize my URL after page refresh.

Any lead ?

Thanks

Answer 1

This question was already address in Emberjs async routing

Solution is to use a Deferred object and implement the loading state.

Hope that helps