Tôi đã cố gắng trong nhiều ngày để làm việc này và tôi không thể tìm ra lý do tại sao khi tôi có ý định hủy một mô hình thuộc về một bộ sưu tập có một thuộc tính url cho tìm nạp dữ liệu của mô hình), chỉ kích hoạt sự kiện hủy diệt 'sự kiện' được phát tán lên bộ sưu tập để dễ dàng ràng buộc bởi chế độ xem danh sách của tôi. Nhưng nó không bao giờ gửi một yêu cầu DELETE thực tế hoặc bất kỳ yêu cầu đến máy chủ nào cả. Ở khắp mọi nơi tôi nhìn, tôi thấy tất cả mọi người bằng cách sử dụng một trong hai bộ sưu tập url của bộ sưu tập, hoặc urlRoot nếu mô hình không được kết nối với một bộ sưu tập. Tôi thậm chí đã thử nghiệm trước khi thực tế this.model.destroy() để kiểm tra các mô hình < console.log (this.model.url());Backbone.js model.destroy() không gửi yêu cầu DELETE
Tôi chưa ghi đè phương thức hủy và đồng bộ hóa cho xương sống. Ngoài ra, mỗi mô hình có một thuộc tính id được điền thông qua tìm nạp của bộ sưu tập (từ các bản ghi cơ sở dữ liệu).
Sự phá hủy diễn ra trong chế độ xem mục danh sách và sự kiện "hủy" của bộ sưu tập bị ràng buộc trong chế độ xem danh sách. Tất cả đều hoạt động tốt (xử lý sự kiện), nhưng vấn đề, một lần nữa, không có yêu cầu đến máy chủ.
Tôi đã hy vọng rằng backbone.js sẽ tự động làm điều đó. Đó là những gì các tài liệu ngụ ý, cũng như rất nhiều ví dụ ở khắp mọi nơi.
Rất cám ơn bất kỳ ai có thể cung cấp một số thông tin hữu ích.
FYI: Tôi đang phát triển trên wampserver PHP 5.3.4.
ListItemView = BaseView.extend({
tagName: "li",
className: "shipment",
initialize: function (options) {
_.bindAll(this);
this.template = listItemTemplate;
this.templateEmpty = listItemTemplateEmpty;
},
events: {
'click .itemTag' : 'toggleData',
'click select option' : 'chkShipper',
'click .update' : 'update',
'click button.delete' : 'removeItem'
},
// ....
removeItem: function() {
debug.log('remove model');
var id = this.model.id;
debug.log(this.model.url());
var options = {
success: function(model, response) {
debug.log('remove success');
//debug.log(model);
debug.log(response);
// this.unbind();
// this.remove();
},
error: function(model, response) {
debug.log('remove error');
debug.log(response);
}
};
this.model.destroy(options);
//model.trigger('destroy', this.model, this.model.collection, options);
}
});
Collection = Backbone.Collection.extend({
model: Model,
url: '?dispatch=get&src=shipments',
url_put : '?dispatch=set&src=shipments',
name: 'Shipments',
initialize: function() {
_.bindAll(this);
this.deferred = new $.Deferred();
/*
this.fetch({
success: this.fetchSuccess,
error: this.fetchError
});
*/
},
fetchSuccess: function (collection, response) {
collection.deferred.resolve();
debug.log(response);
},
fetchError: function (collection, response) {
collection.deferred.reject();
debug.log(response);
throw new Error(this.name + " fetch failed");
},
save: function() {
var that = this;
var proxy = _.extend(new Backbone.Model(),
{
url: this.url_put,
toJSON: function() {
return that.toJSON();
}
});
var newJSON = proxy.toJSON()
proxy.save(
newJSON,
{
success: that.saveSuccess,
error: that.saveError
}
);
},
saveSuccess: function(model, response) {
debug.log('Save successful');
},
saveError: function(model, response) {
var responseText = response.responseText;
throw new Error(this.name + " save failed");
},
updateModels: function(newData) {
//this.reset(newData);
}
});
ListView = BaseView.extend({
tagName: "ul",
className: "shipments adminList",
_viewPointers: {},
initialize: function() {
_.bindAll(this);
var that = this;
this.collection;
this.collection = new collections.ShipmentModel();
this.collection.bind("add", this.addOne);
this.collection.fetch({
success: this.collection.fetchSuccess,
error: this.collection.fetchError
});
this.collection.bind("change", this.save);
this.collection.bind("add", this.addOne);
//this.collection.bind("remove", this.removeModel);
this.collection.bind("destroy", this.removeModel);
this.collection.bind("reset", this.render);
this.collection.deferred.done(function() {
//that.render();
that.options.container.removeClass('hide');
});
debug.log('view pointers');
// debug.log(this._viewPointers['c31']);
// debug.log(this._viewPointers[0]);
},
events: {
},
save: function() {
debug.log('shipments changed');
//this.collection.save();
var that = this;
var proxy = _.extend(new Backbone.Model(),
{
url: that.collection.url_put,
toJSON: function() {
return that.collection.toJSON();
}
});
var newJSON = proxy.toJSON()
proxy.save(
newJSON,
{
success: that.saveSuccess,
error: that.saveError
}
);
},
saveSuccess: function(model, response) {
debug.log('Save successful');
},
saveError: function(model, response) {
var responseText = response.responseText;
throw new Error(this.name + " save failed");
},
addOne: function(model) {
debug.log('added one');
this.renderItem(model);
/*
var view = new SB.Views.TicketSummary({
model: model
});
this._viewPointers[model.cid] = view;
*/
},
removeModel: function(model, response) {
// debug.log(model);
// debug.log('shipment removed from collection');
// remove from server
debug.info('Removing view for ' + model.cid);
debug.info(this._viewPointers[model.cid]);
// this._viewPointers[model.cid].unbind();
// this._viewPointers[model.cid].remove();
debug.info('item removed');
//this.render();
},
add: function() {
var nullModel = new this.collection.model({
"poNum" : null,
"shipper" : null,
"proNum" : null,
"link" : null
});
// var tmpl = emptyItemTmpl;
// debug.log(tmpl);
// this.$el.prepend(tmpl);
this.collection.unshift(nullModel);
this.renderInputItem(nullModel);
},
render: function() {
this.$el.html('');
debug.log('list view render');
var i, len = this.collection.length;
for (i=0; i < len; i++) {
this.renderItem(this.collection.models[i]);
};
$(this.container).find(this.className).remove();
this.$el.prependTo(this.options.container);
return this;
},
renderItem: function (model) {
var item = new listItemView({
"model": model
});
// item.bind('removeItem', this.removeModel);
// this._viewPointers[model.cid] = item;
this._viewPointers[model.cid] = item;
debug.log(this._viewPointers[model.cid]);
item.render().$el.appendTo(this.$el);
},
renderInputItem: function(model) {
var item = new listItemView({
"model": model
});
item.renderEmpty().$el.prependTo(this.$el);
}
});
P.S ... Một lần nữa, có mã được tham chiếu từ nơi khác. Nhưng xin lưu ý: bộ sưu tập không có thuộc tính url được đặt. Và nó hoạt động cho tìm nạp ban đầu cũng như khi có sự kiện thay đổi được kích hoạt để lưu các thay đổi được thực hiện cho các mô hình. Nhưng sự kiện hủy trong chế độ xem danh sách, trong khi nó kích hoạt thành công sự kiện "hủy", nó không gửi yêu cầu HTTP 'DELETE'.
phiên bản nào của xương sống, đăng một số mã luôn giúp ích, jsFiddle luôn tuyệt vời –
Có, vui lòng chia sẻ với chúng tôi một ví dụ mã rất đơn giản để tái tạo sự cố. – fguillen
Bạn có chắc chắn bạn đã bao gồm url cơ sở cho api của bạn trong tiện ích mở rộng của mô hình không? – kinakuta