Send a data payload along with a delete request from a Backbone.Model

Done by extending the Backbone.Model implementation and overriding the destroy function and creating a new base model or w/e people call them.

by Cory Danielson

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<h1>Extend the Backbone.Model implementation and create an enhanced model with a new Backbone.EnhancedModel with an overridden sync method</h1>
<h2>(chrome) To see if this request is working, open your developer panel and click the network tab and run the code. Click on the delete request and inspect the Headers</h2>
<h3>You should see something like this.</h3>
<table>
    <tr>
        <th>Good Request</th>
        <th>Bad Request (without backbone.sync override)</th>
    </tr>
    <tr>
        <td><img src="http://i42.tinypic.com/5nkv1k.png"></img></td>
        <td><img src="http://i43.tinypic.com/j1229v.png"></img></td>
    </tr>
</table>

CSS

h1 { border-bottom: 1px dotted red; }
h2 { border-bottom: 1px dotted salmon; }
h3 { border-bottom: 1px dotted lime; }

JavaScript

// Create your own 'enhanced' model 
Backbone.EnhancedModel = Backbone.Model.extend({
    destroy: function( options ) {
        if ( options.data ) {
            // properly formats data for back-end to parse
            options.data = JSON.stringify(options.data);
        }
        // transform all delete requests to application/json
        options.contentType = 'application/json';
        Backbone.Model.prototype.destroy.call(this, options);
    }
});

// Extend from the enhanced model so that you can get the overridden sync method
var Book = Backbone.EnhancedModel.extend({
    urlRoot: 'api/book',
    defaults: {
        id: 1,
        title: 'Backbone.js Help'
    }
});

var someBook = new Book();

// Maybe you want to only delete hardcover copies from the db? Who knows...
// This usage is a less clean than just calling someBook.destroy(options)
someBook.destroy({ 
    data: { cover: 'hardcover' } 
});