Ember Data deleteRecord() followed by rollback() - how to make object reappear in list?

Question

In a 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 a 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 gets triggered, with the following output:

Delete error before true true
Delete error after false false

... which means that the rollback was successful, and the record has indeed been un-deleted.

However, while calling deleteRecord() updates the DOM to remove the part that represents the deleted record, calling rollback() appears to revert the changes to the record in memory, but fails to revert the changes in the DOM.

How can I ensure that rollback() triggers this change?

Alternatively, is there a way to alter the default behaviour such that deleteRecord() does not trigger a change in the DOM, and instead leaves it unchanged, deferring that change until the success callback is called? (That way a reverting changes to the DOM will not be necessary)

Answer 1

It's probably because the record was removed from the route's model (aka vislble list), but not from the store (cache for visible & non-visible models.)

Try pushing it again to route.model manually.

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