Ember adds empty row to data with slug as id - ajax

Question

I have a resource where I list all my projects from server /projects. You can visit specific project going to /projects/:slug.
When I visit projects resource I see this data in Ember Inspector:
/projects
id | Slug | Title |
-------------------------------------------------
1 | first-project | First project |
-------------------------------------------------
2 | second-project | Second project |
-------------------------------------------------
3 | third-project | Third project |
When I visit a project from list of projects I get the same data without new ajax request and everything is working fine. /projects/first-project
The problem comes when I refresh /projects/first-project page. Ember makes an ajax request to fetch data from server but It also inserts an empty row with slug as id to data.
id | Slug | Title |
-------------------------------------------------------------
first-project | | |
-------------------------------------------------------------
1 | first-project | First project |
Now visiting project list It is showing a list of projects but at the top of the list is this empty row. Why it is inserting this slug row to my data? Maybe my logic is wrong.
<li>
<a id="ember451" class="ember-view" href="/projects/undefined">
<script id="metamorph-13-start" type="text/x-placeholder"></script>
<script id="metamorph-13-end" type="text/x-placeholder"></script>
</a>
</li>
My code for projects:
App.Router.map(function() {
this.resource('project', { path: '/projects' }, function() {
this.resource('project.show', { path: ":post_slug"});
});
});
App.Project = DS.Model.extend({
slug: DS.attr("string"),
title: DS.attr("string")
});
App.ProjectIndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('project').then(function(data) {
return data;
});
}
});
App.ProjectShowRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('project', params.post_slug).then(function(data) {
return data;
});
},
serialize: function(model) {
return { post_slug: model.get("slug") };
}
});
I'm using:
DEBUG: -------------------------------
DEBUG: Ember : 1.1.2
DEBUG: Ember Data : 1.0.0-beta.3
DEBUG: Handlebars : 1.0.0
DEBUG: jQuery : 1.9.1
DEBUG: -------------------------------

Answer 1

Adding this helps. now primary key is slug for Project model and it doesn't duplicate rows.
App.ProjectSerializer = DS.RESTSerializer.extend({
normalize: function(type, hash, property) {
hash.id = hash.slug;
return this._super(type, hash, property);
}
});

Answer 2

By calling
store.find('project', 'first-project')
you're treating the slug as the primary key. I guess that's the reason that a new record is initialized (you have one with the actual primary key of the first project which is probably a number, and one with 'first-project' as the primary key.
Try changing the model hook by calling the store's find() method with a hash of search options, in your case:
store.find('project', { slug: 'first-project' })

Answer 3

There are two other ways to solve this problem without extending the RESTSerializer.
First method: If you can make sure that the slug str is unique across the whole app, and you don't really care about id numbers. Then you can set the ids for each project using the slug str because ids don't have to be numbers.
{ id: 'first-project', content: 'xxx' }
{ id: 'second-project', content: 'yyy' }
Second method. use the modelFor method. example code below:
App.ProjectShowRoute = Ember.Route.extend({
model: function(params) {
return this.modelFor('its_parent_route').findBy('slug', params.post_slug);
},
serialize: function(model) {
return { post_slug: model.get("slug") };
}
});
By calling modelFor here, it won't make duplicate calls to the server since you're using ember data.
Hope it helps.