CODEWITHSUNDEEP
javascriptember.jsember-data
Jakub Arnold
Jakub Arnold

Reputation: 87210

Ember deserialization breaking URL with null

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
  })
});

Upvotes: 1

Views: 263

Answers (2)

Jakub Arnold
Jakub Arnold

Reputation: 87210

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")
});

Upvotes: 0

Rudi Angela
Rudi Angela

Reputation: 1473

Your route should be '/post/:post_id' instead of 'post/:id'. The parameter name is composed of the decapitalized model name, an underscore and the attribute name.

Doing this way you don't need serialize/deserialize method, Ember.js will do the job for you

Upvotes: 2

Related Questions