As the button is already in place, we just have to wire it up. In EventView, let's add the event listener as follows:
events: {
"click .delete" : "destroy"
},You know what's next. We need to create the destroy method in the EventView class. It can be done as follows:
destroy: function (evt) {
evt.preventDefault();
this.model.destroy();
this.remove();
},
remove: function () {
this.$el.fadeOut(Backbone.View.prototype.remove.bind(this));
return false;
}The destroy method will call the model's destroy method and then call this view's remove method. Normally, that would be all, but we want to add a touch more. We want to fade the table row out and then remove the DOM elements. So, we're overwriting the default Backbone View remove method. We'll use jQuery to fade the element out. The fadeOut method that jQuery has takes a callback, a function that will be called after the fadeout is complete. We can get the usual Backbone View remove method from the Backbone.View.prototype...