Enforcing .destroy() in Backbone - backbone.js

Question

I am attempting to do a DELETE request for a model view in Backbone. However, when the link is clicked, Backbone is doing a GET request. How can I force the model view to destroy the model instead of get it?
Jade/HTML
script(type="text/template", id="allContactsTemplate").
<td><%= first_name %></td>
<td><%= last_name %></td>
<td><%= email %></td>
<td><%= description %></td>
<td>Delete</td>
Backbone JS
// Single Contact View
App.Views.Contact = Backbone.View.extend({
tagName: 'tr',
template: template('allContactsTemplate'),
events: {
'click .delete': 'deleteContact'
},
initialize: function() {
this.model.on( 'destroy', this.unrender, this);
},
render: function() {
var template = this.template( this.model.toJSON() );
this.$el.html( template );
return this;
},
deleteContact: function() {
this.model.destroy();
},
unrender: function() {
this.remove();
}
});

Answer 1

You're not cancelling the <a>'s default click action anywhere so clicking your .delete does two things:
Calls this.model.destroy() which should trigger a DELETE request.
Triggers the usual <a> behavior which would be a GET contacts/some_id request.
Presumably the GET will take over the browser before the AJAX DELETE gets a chance to do anything. You should cancel the <a>'s default action in the usual ways:
deleteContact: function(e) {
e.preventDefault();
this.model.destroy();
}
or:
deleteContact: function() {
this.model.destroy();
return false;
}
You probably don't even need an href on that <a> (unless your CSS cares).