List not updated after deleteRecord

Question

I have an ArrayController whose content is defined in a route like that:

App.UsersRoute = Ember.Route.extend({
  model: function() {
    return App.User.find();
  },

  setupController: function(controller, model) {
    this._super(controller, model);
    this.controllerFor('application').set('currentRoute', 'users');
  }
});

And I list the data in a template:

<ul>
  {{#each user in arrangedContent}}
  <li>
    {{user.lastName}} {{user.firstName}}
    {{#linkTo "users.edit" user class="btn btn-primary btn-small"}}EDIT{{/linkTo}}
  </li>
  {{/each}}
</ul>

It works fine.

If I create a new item, it is automatically added to the list in the template:

App.UsersNewRoute = Ember.Route.extend({
  model: function() {
    return App.User.createRecord({firstName: '', lastName: ''});
  }
});

But when I delete an item in a "edit" view, it doesn't work:

App.UsersEditController = Ember.ObjectController.extend({
  ...

  destroy: function() {
    this.get('content').deleteRecord();
    this.get('store').commit();
    this.transitionToRoute("users.index");
  }
});

But in the "new" view, if I delete the new created item, it works (without the commit).

In the edit controller, if I remove the "commit", the list is updated, but when I do another action, the list is reloaded, and the deleted item reappears (normal).

So, how to delete an item?

NOTE: I use the "master" code of ember and ember-data, refreshed just now.

Answer 1

I just experienced a similar issue under a very different set of circumstances.

I'm using "grunt-ember-boilerplate" (highly recommended if you're into CoffeeScript and Ember). It came with a version of Ember Data that had a weird bug where properly deleted records would persist in the cache and thus not be removed from lists.

I did't have the time to figure out exactly what was going on; so I just tried getting the latest build of Ember Data (2013-05-10 10:20:34 -0700) and that fixed the issue right away.

Just posting here in case anyone else comes across a similar issue.

Also, I agree with Jakub Arnold when he talks about not committing the "store" and using event listeners to ensure clean state. Just today, I found a very useful blog entry on the subject, "Patterns and anti-patterns for Ember Data".

Answer 2

You should also transition only after the record was deleted, since commit happens asynchronously.

var user = this.get("content");

user.one("didDelete", this, function() {
  this.transitionTo("users.index");
});

user.deleteRecord();
user.get("transaction").commit();

Also note that comitting the transaction is preferred over comitting the store. If you later decide to add the record to it's own transaction you will have less work to do, and if you don't, it will still use the same defaultTransaction as comitting the store would.