Ember Data deleteRecord () followed by rollback () - how to make an object re-displayed in a list?

Question

In the controller:

actions: { selectDelete: function(note) { console.log('selectDelete', note); note.deleteRecord(); note.save().then( function success() { console.log('Deleted successfully'); }, function failure() { console.log('Delete error before', this.get('isDeleted'), this.get('isDirty'); //true, true // note.transitionTo('loaded.saved'); //also has same effect note.rollback(); console.log('Delete error after', this.get('isDeleted'), this.get('isDirty'); //false, false } ); }, } 

In the template:

 {{#each note in model.notes}} <li> <span>{{note.text}}</span> <span {{action 'selectDelete' note}}>[Delete]</span> </li> {{else}} No Notes {{/each}} 

Now, when I click on the [Delete] span, the selectDelete action selectDelete with the following output:

 Delete error before true true Delete error after false false 

... this means that the rollback was successful and the record really was not deleted.

However, when calling deleteRecord() DOM is updated to remove the part that represents the deleted record, the rollback() call seems to undo the changes to the records in memory, but does not allow the changes to be returned to the DOM.

How can I guarantee that rollback() causes this change?

Alternatively, is there a way to change the default behavior so that deleteRecord() does not cause a change in the DOM, and instead leaves it unchanged, deferring that change until the success callback is called? (Thus, a return to the DOM is not required)

Answer 1

Probably due to the fact that the record was deleted from the route model (aka vislble list), but not from the storage (cache for visible and invisible models).

Try clicking it again on route.model .

 route.get('model').pushObject(note);