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.

I already encountered the same kind of problem. I suppose that if you refresh the page, the deleted item is'nt here anymore ? Though, during the commit, is there any server response still containing this record ? — sly7_7, Jan 13 '13 at 13:08
YES! It's the error. In the rails server, I returned the destroyed object with "render json: user". With "render json: nil, status: :ok", it's OK! Thanks a lot. — Frédéric Mascaro, Jan 13 '13 at 13:24
Fine :), this is indeed a quite difficult error to track. The same kind of behavior may arrive if you create/delete a child and modify the parent in the same time.(in case of hasMany/belongs) 2 requests go to the server, but the parent modification is run before the child removal. As a result, for Ember-data, when the parent response come, it has always the child... boom... — sly7_7, Jan 13 '13 at 13:28
Can you update this question so it doesn't appear "unanswered" anymore? — Trek Glowacki, Mar 05 '13 at 13:38

score 2 · Answer 1 · answered May 11 '13 at 17:08

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".

score 1 · Answer 2 · answered Mar 16 '13 at 09:30

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.

List not updated after deleteRecord

2 Answers2