title: Backbone DELETE is sent with an empty body
body: <p><strong>Delete Function:</strong></p>
  
  <p>My backbone function to delete a model (called on the click of a button) looks like this:</p>
  
  <pre><code>deleteCar: function (ev) {
          console.log(this.car.toJSON());
          this.car.destroy({
            success: function () {
              router.navigate('', {trigger:true});
            }
          });
  
      return false;
  },
  </code></pre>
  
  <p><code>this.car</code> is created in another function but in the main scope. As seen above, I'm logging the contents of <code>this.car</code> and I get a JSON like this: </p>
  
  <p><code>Object {carId: "17", carDes: "awesome"}</code></p>
  
  <p>Now, I'm calling <code>this.car.destroy...</code> and I'm observing the network tab on Chrome. I can see a DELETE request firing but there is no data appended to the request. It's just an empty request to the correct url. </p>
  
  <p>How can I attach my car model to the request?</p>
  
  <p>Edit:</p>
  
  <p><strong>Render Function:</strong></p>
  
  <p>This is the function that creates a new car model. It is in the same Backbone view as the Delete function above.</p>
  
  <pre><code>  render: function(options) {
        var that = this;
        if (options.id) {
            that.car = new Car({
                carId: options.id
            });
            that.car.url = 'http://localhost/Project/index.php/rest/resource/car/carId/' + options.id;
            that.car.fetch({
                success: function(car) {
                    console.log(that.car.toJSON());
                    that.car.url = 'http://localhost/Project/index.php/rest/resource/car/';
                    var template = _.template($("#edit-car-template").html());
                    var data = {
                        car: that.car
                    };
                    that.$el.html(template(data));
                }
            });
        } else {
            var template = _.template($("#edit-car-template").html());
            var data = {
                car: null
            };
            that.$el.html(template(data));
        }
    }
  </code></pre>
  
  <p><strong>Edit-Car-Template</strong></p>
  
  <pre><code>&lt;script type="text/template" id="edit-car-template"&gt;
      &lt;form class="edit-car-form"&gt;
          &lt;legend&gt;
              &lt;%= car ? 'Edit' : 'New' %&gt; Car&lt;/legend&gt;
  
          &lt;label&gt;Car Description&lt;/label&gt;
          &lt;input name="carDes" type="text" value="&lt;%= car ? car.get('carDes') : '' %&gt;"&gt;
          &lt;hr /&gt;
          &lt;button type="submit" class="btn"&gt;
              &lt;%=  car ? 'Update' : 'Create' %&gt;
          &lt;/button&gt;
          &lt;% if(car) { %&gt;
              &lt;input type="hidden" name="carId" value="&lt;%= car.get('carId') %&gt;" /&gt;
              &lt;button data-car-id="&lt;%= car.get('carId') %&gt;" class="btn btn-danger delete"&gt;Delete&lt;/button&gt;
              &lt;% }; %&gt;
      &lt;/form&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Edit 2:</strong> 
  <strong>Layout:</strong></p>
  
  <p>The view layout of my application is as follows:</p>
  
  <p><a href="https://i.stack.imgur.com/PMExI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PMExI.png" alt="layout"></a></p>
  
  <p>And the following code is used to render the CarListView (get the list of cars using the REST API)</p>
  
  <pre><code>var CarListView = Backbone.View.extend({
      el: '.page',
      render: function () {
          var that = this;
          this.cars = new Cars();
          this.cars.fetch({
              success: function () {
                  var template = _.template($("#car-list-template").html());
                  var data = {cars: that.cars.toJSON()};
                  that.$el.html(template(data));
              }
          })
      }
  });
  </code></pre>
  
  <p><strong>Models</strong></p>
  
  <p>My car model and car collection are defined as follows:</p>
  
  <pre><code>var Car = Backbone.Model.extend({
      urlRoot: ROOT + 'car',
      idAttribute: 'carId'
  });
  var Cars = Backbone.Collection.extend({
      model: Car,
      url: ROOT + 'car'
  })
  </code></pre>
  
  <p><strong>Update Function:</strong></p>
  
  <p>And following is the code for saving (updating) the model once the update button is clicked. This part works perfectly.</p>
  
  <pre><code>events: {
      'submit .edit-car-form': 'saveCar',
      'click .delete': 'deleteCar'
  },
  saveCar: function (ev) {
      console.log('in save');
      var carDetails = $(ev.currentTarget).serializeObject();
      var car = new Car();
      car.save(carDetails, {
          success: function (car) {
              router.navigate('', {trigger: true});
          }
      });
      return false;
  }
  </code></pre>