Question

I have a basic router for posts index and show action. If I navigate to a single post, it renders the page correctly and sets the URL to /#/posts/foo. But if I copy the URL and paste it into a new tab, it will load the page, but the url will change to /#/posts/null. Other than that the page is rendered properly and no errors are shown

show: Em.Route.extend({
  route: "/post/:id",

  serialize: function(router, context) {
    return { id: context.get("id") };
  },

  deserialize: function(router, context) {
    return App.get("store").find(App.Post, context.id);
  },

  connectOutlets: function(router, context) {
    router.get("applicationController").connectOutlet("body", "post", context);
  }
})

with a simple model

App.Post = DS.Model.extend({
  id:      DS.attr("string"),
  title:   DS.attr("string"),
  content: DS.attr("string"),
  image:   DS.attr("string")
});

and the log looks like this

STATEMANAGER: Entering root ember.js:17420
STATEMANAGER: Sending event 'navigateAway' to state root. ember.js:17172
STATEMANAGER: Sending event 'unroutePath' to state root. ember.js:17172
STATEMANAGER: Sending event 'routePath' to state root. ember.js:17172
STATEMANAGER: Entering root.show 

and a router

App.Store = DS.Store.extend({
  revision: 4,
  adapter: DS.RESTAdapter.create({
    bulkCommit: false
  })
});

Answer 1

The issue was specifying id as an attrirbute. You should never do that and let Ember Data take care of it automatically.

App.Post = DS.Model.extend({
  title:   DS.attr("string"),
  content: DS.attr("string"),
  image:   DS.attr("string")
});