Backbone DELETE与空体

时间:2016-01-02 07:08:06

标签: javascript rest backbone.js

删除功能

我删除模型的骨干函数(点击按钮时调用)如下所示:

deleteCar: function (ev) {
        console.log(this.car.toJSON());
        this.car.destroy({
          success: function () {
            router.navigate('', {trigger:true});
          }
        });

    return false;
},

this.car是在另一个函数中创建的,但在主范围内。如上所示,我正在记录this.car的内容,我得到一个像这样的JSON:

Object {carId: "17", carDes: "awesome"}

现在,我正在呼叫this.car.destroy...,我正在观察Chrome上的网络标签。我可以看到一个DELETE请求被触发但是没有数据附加到请求中。这只是对正确网址的空请求。

如何将我的汽车模型附加到请求中?

编辑:

渲染功能:

这是创建新车型的功能。它与上面的删除功能位于相同的Backbone视图中。

  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));
      }
  }

修改车载-模板

<script type="text/template" id="edit-car-template">
    <form class="edit-car-form">
        <legend>
            <%= car ? 'Edit' : 'New' %> Car</legend>

        <label>Car Description</label>
        <input name="carDes" type="text" value="<%= car ? car.get('carDes') : '' %>">
        <hr />
        <button type="submit" class="btn">
            <%=  car ? 'Update' : 'Create' %>
        </button>
        <% if(car) { %>
            <input type="hidden" name="carId" value="<%= car.get('carId') %>" />
            <button data-car-id="<%= car.get('carId') %>" class="btn btn-danger delete">Delete</button>
            <% }; %>
    </form>
</script>

编辑2:布局:

我的应用程序的视图布局如下:

layout

以下代码用于呈现CarListView(使用REST API获取汽车列表)

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));
            }
        })
    }
});

模型

我的汽车模型和汽车收藏定义如下:

var Car = Backbone.Model.extend({
    urlRoot: ROOT + 'car',
    idAttribute: 'carId'
});
var Cars = Backbone.Collection.extend({
    model: Car,
    url: ROOT + 'car'
})

更新功能

以下是单击更新按钮后保存(更新)模型的代码。这部分完美无缺。

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;
}

1 个答案:

答案 0 :(得分:4)

这听起来像预期的那样。 Backbone.Model.destroy()方法会生成对模型相关网址的HTTP DELETE调用。它通常在方法体中没有任何内容,因为URL末尾的ID应该是删除RESTful资源所需的全部内容。如果您需要不同的行为,Backbone希望您覆盖模型的sync方法(see herehere)。传统上,HTTP服务器忽略了HTTP DELETE方法调用上发送的任何正文,而HTTP spec并未提及它需要正文,因此Backbone只是鼓励您遵循该示例。

另请注意,在模型实例本身上设置url属性并不是确保URL具有模型ID的常用方法。如果您要在Backbone.Model之外使用Backbone.Collection,则在指定urlRoot时应包含Car属性...您还可以在其中指定fetch 1}}函数,如果你真的需要覆盖它:

var Car = Backbone.Model.extend({

    urlRoot: '/Project/index.php/rest/resource/car`

    fetch: function(options) {
        // ... if needed, but note you can provide a "success" 
        // callback in the options; see below.
    }
});

这样做,Backbone将确保对car.destroy()的任何调用都会生成正确的网址。例如:

var car = new Car({
    id: 123
});

// This will GET /Project/index.php/rest/resource/car/123
car.fetch({ 
    success: function() {
        console.log('Received: ' + car.toJSON());
        // ... anything else you need to do after fetching.
     });
});

// ... some time later ...

// This will DELETE /Project/index.php/rest/resource/car/123
car.destroy({
    success: function() {
        console.log('Car has been deleted on server');
    }
 });

同样,如果您的服务器需要的信息多于模型的ID才能删除某些内容,那么您必须覆盖sync方法......但这是另一个问题!