删除功能
我删除模型的骨干函数(点击按钮时调用)如下所示:
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: 的布局:
我的应用程序的视图布局如下:
以下代码用于呈现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;
}
答案 0 :(得分:4)
这听起来像预期的那样。 Backbone.Model.destroy()
方法会生成对模型相关网址的HTTP DELETE
调用。它通常在方法体中没有任何内容,因为URL末尾的ID应该是删除RESTful资源所需的全部内容。如果您需要不同的行为,Backbone希望您覆盖模型的sync
方法(see here和here)。传统上,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
方法......但这是另一个问题!