Deleted record in ember is not removed from collection

Question

I am building a simple CRUD app. I have a list of records fetched from the server, click on the first and I am on the show page for that record with a delete button that ties into this action on the controller:

destroy: function() {
  this.content.deleteRecord()
  this.store.commit()
  this.transitionTo('usersIndex')
}

I know the record is deleted, I can see it deleted on the server. The AJAX request is successful. However, the record still shows up on the index page. If I do a hard refresh from the server it is now gone.

My Router for usersIndex is the following:

App.UsersIndexRoute = Ember.Route.extend({
  model: function(params) {
    return App.Users.find();
  },
  setupController: function(controller, model) {
    controller.set('content', model);
  }
});

Answer 1

After calling deleteRecord you must save it for the ember data.

destroy: function() {
  this.content.deleteRecord()
  this.content.get('isDeleted');
  this.content.save()
  this.store.commit()
  this.transitionTo('usersIndex')
}

Or alternatively you can sue destroyRecord which deleted thh record from both backend and ember data

destroy: function() {
      this.content.destroyRecord()
      this.transitionTo('usersIndex')
    }

Hope this helps !