这是我第二次提出这个问题,第一次将文字弄糊涂了解,对不起。以下是改进和最佳解释的相同问题。
我有一个PageableCollection,数据加载没有问题!表格的线条(我使用backgrid,骨干的扩展名)是可编辑的!但编辑完成后按回车按钮没有任何反应!服务器没有被调用,我等待服务器调用ajax,但它不会发生。
我找到了覆盖同步的方法,但我真的不知道在编辑后打电话要做什么,然后说'#34;好的"或"错误更新"。
代码如下:var Territory = Backbone.Model.extend({});
var PageableTerritories = Backbone.PageableCollection.extend({
model: Territory,
url: "linhas/results",
state: {
pageSize: 9
},
mode: "client",
sync: function (method, model, options){
return Backbone.sync(method, model, options);
}
});
var pageableTerritories = new PageableTerritories(),
initialTerritories = pageableTerritories;
function createBackgrid(collection){
var columns = [{
name: "id", // The key of the model attribute
label: "ID", // The name to display in the header
editable: false, // By default every cell in a column is editable, but *ID* shouldn't be
// Defines a cell type, and ID is displayed as an integer without the ',' separating 1000s.
cell: Backgrid.IntegerCell.extend({
orderSeparator: ''
})
}, {
name: "name",
label: "Name",
// The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
cell: "string" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
}, {
name: "pop",
label: "Population",
cell: "integer" // An integer cell is a number cell that displays humanized integers
}, {
name: "url",
label: "URL",
cell: "uri" // Renders the value in an HTML <a> element
}];
if ($(window).width() < 768){
//okendoken. removing URL-column for screens smaller than 768px
columns.splice(3,1)
}
var pageableGrid = new Backgrid.Grid({
columns: columns,
collection: collection,
footer: Backgrid.Extension.Paginator.extend({
//okendoken. rewrite template to add pagination class to container
template: _.template('<tr><td colspan="<%= colspan %>"><ul class="pagination"><% _.each(handles, function (handle) { %><li <% if (handle.className) { %>class="<%= handle.className %>"<% } %>><a href="#" <% if (handle.title) {%> title="<%= handle.title %>"<% } %>><%= handle.label %></a></li><% }); %></ul></td></tr>')
}),
className: 'table table-striped table-editable no-margin'
});
$("#table-dynamic").html(pageableGrid.render().$el);
}
答案 0 :(得分:3)
您需要在编辑单元格后触发保存。 这可以通过监听Territory模型的change事件来完成。我一直在使用以下内容:
var MyModel = Backbone.Model.extend({
initialize : function() {
this.on('change', function(model, options) {
// Prevent save on update
if (options.save === false)
return;
model.save(_.clone(model.attributes), {});
});
},
// Process and remove model unrelated stuff from server response
parse : function(resp, options) {
// pure model fetch
if (!resp.data && !resp.notifications)
return resp;
// process notifications
if (resp.notifications && resp.notifications.length)
processNotifications(resp.notifications);
return resp.data || {};
},
rollBack : function() {
// Rollback to old data
this.set(this.previousAttributes(), {save: false});
// Trigger cell rendering
},
save : function(attrs, options) {
options || (options = {});
options.success = function(model, resp, options) {
// Show optional success messages here if needed and
// not in response from server
};
options.error = function(model, xhr, options) {
var resp = JSON.parse(xhr.responseText);
model.parse(resp, options);
// Rollback to old data
model.rollBack();
model.trigger('backgrid:error');
};
// We get the correct data back from the server - prevent multiple saves
options.save = false;
options.data = JSON.stringify(attrs);
Backbone.Model.prototype.save.call(this, attrs, options);
}
});
此实现从服务器获取所有通知(成功时没有反馈)。因此,通知在model.parse方法中过滤。如果有通知,则数据位于响应的属性数据中。但是,如果您显示来自js的反馈,请在options.success和options.error
中实现它