Ember appending same models to route

Question

I'm having an issue where Ember continues to append the same route models to a route.

# ROUTER
MediaUi.Router.map(function () {
    this.route('movie', { path: '/movie/:id' });
});

# ROUTE
MediaUi.IndexRoute = Ember.Route.extend({
  'model': function() {
    return MediaUi.Media.find();
  }
});

# MODEL
MediaUi.Media = DS.Model.extend({
    'type':     DS.attr('string'),
    'title':    DS.attr('string'),
    'director': DS.attr('string'),
    'year':     DS.attr('number'),
    'url':      DS.attr('string'),
    'media':    DS.attr('string'),
    '_id':      DS.attr('string'),
    'description': DS.attr('string', { 'defaultValue': 'TBD' })
});x

DS.RESTAdapter.map('MediaUi.Media', {
    'id':   { 'key': '_id' }
});

DS.RESTAdapter.reopen({
  url: 'http://localhost:3000'
});


#TEMPLATE
<table class="table">
    <thead>
        <tr>
            <th>Title</th>
            <th>Description</th>
            <th>Actions</th>
        </tr>
    </thead>
  {{#each item in model}}
    <tr {{ bindAttr data-id="item._id" }}>
        <td>{{#linkTo 'movie' item }} {{ item.title }} {{/linkTo}}</td>
        <td><p>{{ item.description }}</p></td>
        <td>
            <button {{ action "launchModal" item target="view" }} class="btn btn-info">More Information</button>
            <button class="btn btn-warning">Edit</button>
            <button class="btn btn-danger">Remove</button>
        </td>
    </tr>
  {{/each}}
</table>

{{ view MediaUi.ModalView }}

# JSON


{
  "medias": [
    {
      "type": "movie",
      "title": "The Dark Knight",
      "director": "Christopher Nolan",
      "year": 2008,
      "url": "http://www.imdb.com/title/tt0468569/",
      "media": "Blu-ray",
      "_id": "51e2fc1b4c19500de6000001"
    },
    {
      "type": "movie",
      "title": "Inception",
      "director": "Christopher Nolan",
      "year": 2010,
      "url": "http://www.imdb.com/title/tt1375666/",
      "media": "Blu-ray",
      "_id": "51e2fc1b4c19500de6000002"
    },
    {
      "type": "movie",
      "title": "The Dark Knight Rises",
      "director": "Christopher Nolan",
      "year": 2012,
      "url": "http://www.imdb.com/title/tt1345836/",
      "media": "Blu-ray",
      "_id": "51e2fc1b4c19500de6000003"
    },
    {
      "type": "movie",
      "title": "Django Unchained",
      "director": "Quentin Tarantino",
      "year": 2012,
      "url": "http://www.imdb.com/title/tt1853728/",
      "media": "Blu-ray",
      "_id": "51e2fc1b4c19500de6000004"
    },
    {
      "type": "movie",
      "title": "City of God",
      "director": "Kátia Lund,Fernando Meirelles",
      "year": 2002,
      "url": "http://www.imdb.com/title/tt0317248/",
      "media": "DVD",
      "_id": "51e2fc1b4c19500de6000005"
    }
  ]
}

This happens when the following is met:

• User Transitione to Model specific page ('movie/:movie_id')
• User then clicks the back button in the browser or clicks on a back button in the application created with a linkTo handlebars helper

Any help would be greatly appreciated. Thanks!

Answer 1

If anyone comes across this issue, this might have to do with your backend. In my case it was the fact that MongoDB uses _id and not id as the identifier, and Ember associates id as a primary key - keeping track of your records. Therefore you need to create an adapter that serializes this difference and configure your application appropriately.

In my case I had to do the following:

MediaUi.Adapter = DS.RESTAdapter.extend({
    serializer: DS.RESTSerializer.extend({
    primaryKey: function(type){
      return '_id';
    }
  })
});

MediaUi.Store = DS.Store.extend({
  revision: 11,
  adapter: 'MediaUi.Adapter'
});

Reference: Ember, Ember Data and MongoDB's _id