javascript - 仅将更改的记录保存在BackGrid网格上？

我正在学习Backbone.js，并使用BackGrid渲染数据并为最终用户提供一种在Microsoft MVC网站上编辑记录的方法。出于此测试网格的目的，我使用供应商模型。 BackGrid默认使数据可编辑（这对我来说是有好处的）。我已将以下JavaScript添加到视图中。

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（）方法，并将模型传递给save Action，在这种情况下为BackGridSave并成功保存更改的记录，但似乎将所有供应商保存在仅当其中一个供应商发生更改时才显示模型。从JavaScript / Backbone.js / 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 = "/Robbys/BackGridSave";
        model.save();
        model.off("change", null, this); // prevent the change event from     being triggered many times.



    });
}

});