EmberJS CRUD : deletedRecord keeps re-appearing after linkTo

Question

I have an issue with deleting records from an Ember.JS model.

I have an overview of records in my handlebars template with a delete button for each row.

When clicking the button I would like to remove that row from the table (and execute a DELETE on my REST API).

My handlebars template contains the following table + delete button for every record.

<table class="table table-hover">
  <tr>
    <th>Latitude</th>
    <th>Longitude</th>
    <th>Accuracy</th>
    <th></th>
  </tr>
  {{#each model}}
    <tr>
    <td>{{latitude}}</td>
    <td>{{longitude}}</td>
    <td>{{accuracy}}</td>
    <td><button {{action removeItem this target="view"}}>Delete</button></td>
    </tr>
  {{/each}}
</table>

My view looks like this

App.LocationsIndexView = Ember.View.extend({
    removeItem: function(location) {
      this.get('controller').send('removeItem', location);
    }
 });

My controller looks like this :

App.LocationsIndexController = Ember.ArrayController.extend({
  removeItem: function(location) {
    console.log("Removing location " + location);

    location.one("didDelete", this, function() {
      console.log("record deleted");
      this.get("target").transitionTo("locations");
    });

    location.deleteRecord();
    this.get("store").commit();
  }
});

The removeItem methods are called, the item is removed from the table and the DELETE is called on the REST API. Great !

However ......

If I switch to another template (using linkTo) and return to the overview table (again using linkTo), the deleted record re-appears in the table. It is not present in the backend anymore so it cannot be delete again :

Uncaught Error: Attempted to handle event `deleteRecord` on <App.Location:ember356:517d96d7658c51de1c000027> while in state rootState.deleted.saved. Called with undefined

I've gone through the guides but they force you to jump all over the place. http://emberjs.com/guides/views/ looked promising (actually showing the delete button that I want to implement), only to continue to something completely different.

I would like to understand why the deleted item re-appears and how I can avoid that. I've tried calling this.removeObject(location) in the ArrayController as well but the deleted record keeps re-appearing.

I can reproduce the issue using the browser console

locs = App.Location.find();
locs.content.length // returns 5
newLoc = App.Location.createRecord({latitude:120,longitude:120})
locs = App.Location.find();
locs.content.length // returns 6
newLoc.deleteRecord()
locs.content.length // returns 5
locs = App.Location.find();
locs.content.length // returns 6 (why is it returning 6 here ?)

ddewaele ddewaele · Accepted Answer · 2013-05-01T20:38:15

This issue was caused due to a bug in ember.js / ember-data.js or a compatibility issue between the 2.

The issue was resolved at some point when I picked up the latest pair of ember and ember-data from the builds.emberjs.com site.

With this combo, the delete worked fine and

locs = App.Location.find();
locs.content.length // returns 5
newLoc = App.Location.createRecord({latitude:120,longitude:120})
locs = App.Location.find();
locs.content.length // returns 6
newLoc.deleteRecord()
locs.content.length // returns 5
locs = App.Location.find();
locs.content.length // returns 5 now as it should where before this returnd 6

So when using ember-data, always ensure that it is compatible with the ember.js you are using. The EmberJS continuous integration that posts the latest versions of ember and ember-data on http://builds.emberjs.com should pass their test suite and should be considered compatible.

EmberJS CRUD : deletedRecord keeps re-appearing after linkTo

1 Answers