Model doesn't update after record delete in Emberjs

Question

I am actually using Ajax instead of Ember-Data to do CRUD operations in my Ember app.

Scenario is whenever I am deleting a record, the model doesn't update. I have a list of projects and each project has a 'Delete' button in front of it.

Here's the action associated with Delete:

deleteItem: function(item){ //function for delete action
            var id = item.get('id');
            $.ajax({
                type : "POST",
                url : "http://pioneerdev.us/users/deleteProject/" + id,
                dataType : "json",
                success : function(data) {
                    console.log('success');
                }
            });
            alertify.success('Record Deleted!');
            window.setTimeout(function(){location.reload()},3000)
        }

As you can see I am using location.reload to manually reload the model. If anyone's interested he can look at the full source at my GitHub repo

Is there any better way to do that?

Answer 1

I updated your code with some comments. I hope it helps.

actions: {
  deleteItem: function(item){
    var id = item.get('id');
    var controller = this;
    $.ajax({
      type : "POST",
      url : "http://pioneerdev.us/users/deleteProject/" + id,
      dataType : "json",
      // use the success callback to safe notify the user when the record is deleted
      // in your current implementation the alert is displayed even if an error occurs in the server.
      success : function(data) {          
        // no need to location.reload, the removeObject will remove that item
        controller.removeObject(item);                    
        alertify.success('Record Deleted!');
      }
    });  
  }
},
filteredContent : function() {
  var searchText = this.get('searchText'), regex = new RegExp(searchText, 'i');

  return this.get('arrangedContent').filter(function(item) {
    return regex.test(item.projectname);
  });
  // instead of model use model.length so your template will update when some item is added or removed
}.property('searchText', 'model.length')