0
我正在學習Backbone.js並使用BackGrid呈現數據併爲最終用戶提供了一種在Microsoft MVC網站上編輯記錄的方法。爲了這個測試網格的目的,我使用了一個供應商模型。 BackGrid默認可以編輯數據(這對我的目的是有好處的)。我已將以下JavaScript添加到我的視圖中。只保存BackGrid網格上已更改的記錄?
var Vendor = Backbone.Model.extend({
initialize: function() {
Backbone.Model.prototype.initialize.apply(this, arguments);
this.on("change", function (model, options) {
if (options && options.save === false) return;
model.url = "/Vendor/BackGridSave";
model.save();
});
}
});
var PageableVendors = Backbone.PageableCollection.extend(
{
model: Vendor,
url: "/Vendor/IndexJson",
state: {
pageSize: 3
},
mode: "client" // page entirely on the client side.
});
var pageableVendors = new PageableVendors();
//{ data: "ID" },
//{ data: "ClientID" },
//{ data: "CarrierID" },
//{ data: "Number" },
//{ data: "Name" },
//{ data: "IsActive" }
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: "ClientID",
label: "ClientID",
cell: "integer" // An integer cell is a number cell that displays humanized integers
}, {
name: "CarrierID",
label: "CarrierID",
cell: "number" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
}, {
name: "Number",
label: "Number",
cell: "string"
}, {
name: "Name",
label: "Name",
cell: "string"
},
{
name: "IsActive",
label: "IsActive",
cell: "boolean"
}
];
// initialize a new grid instance.
var pageableGrid = new Backgrid.Grid({
columns: [
{
name:"",
cell: "select-row",
headercell: "select-all"
}].concat(columns),
collection: pageableVendors
});
// render the grid.
var $p = $("#vendor-grid").append(pageableGrid.render().el);
// Initialize the paginator
var paginator = new Backgrid.Extension.Paginator({
collection: pageableVendors
});
// Render the paginator
$p.after(paginator.render().el);
// Initialize a client-side filter to filter on the client
// mode pageable collection's cache.
var filter = new Backgrid.Extension.ClientSideFilter({
collection: pageableVendors,
fields: ['Name']
});
// REnder the filter.
$p.before(filter.render().el);
//Add some space to the filter and move it to teh right.
$(filter.el).css({ float: "right", margin: "20px" });
// Fetch some data
pageableVendors.fetch({ reset: true });
@{
ViewBag.Title = "BackGridIndex";
}
<h2>BackGridIndex</h2>
<div id="vendor-grid"></div>
@section styles {
@Styles.Render("~/Scripts/backgrid.css")
@Styles.Render("~/Scripts/backgrid-select-all.min.css")
@Styles.Render("~/Scripts/backgrid-filter.min.css")
@Styles.Render("~/Scripts/backgrid-paginator.min.css")
}
@section scripts {
@Scripts.Render("~/Scripts/underscore.min.js")
@Scripts.Render("~/Scripts/backbone.min.js")
@Scripts.Render("~/Scripts/backgrid.js")
@Scripts.Render("~/Scripts/backgrid-select-all.min.js")
@Scripts.Render("~/Scripts/backbone.paginator.min.js")
@Scripts.Render("~/Scripts/backgrid-paginator.min.js")
@Scripts.Render("~/Scripts/backgrid-filter.min.js")
@Scripts.Render("~/Scripts/Robbys/BackGridIndex.js")
}
當用戶編輯的行,它成功地觸發該撞擊model.Save()方法,並傳遞模型到保存動作,在這種情況下BackGridSave併成功保存記錄發生了變化,但似乎只有其中一家供應商發生了變化,纔將所有供應商都保存在模型中。有沒有辦法從JavaScript/Backbone.js/BackGrid到只通過一個供應商 - 更改的供應商?
更新:我意識到它不會發送每個供應商,但它多次發送相同的供應商,就好像更改事件多次觸發一樣。
「將所有供應商保存在模型中」 - 通常在Backbone中模型表示單個記錄,而集合表示一組記錄。也許你需要使用一個集合而不是一個模型。 – mikeapr4
您不需要調用父類的初始化'Backbone.Model.prototype.initialize.apply(this,arguments);',因爲初始化的目的將被覆蓋。 –
另外,請包含[mcve]。 –