是否仅保存BackGrid网格上已更改的记录？

Question

我正在学习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()方法，并将模型传递给保存操作，在本例中为BackGridSave，它成功地保存了更改的记录，但似乎在只有一个供应商发生更改时保存了模型中的所有供应商。有没有办法从JavaScript/Backbone.js/BackGrid只传递一个供应商-更改的供应商？

更新:我意识到它不会发送每个供应商，但它会多次发送相同的供应商，就好像更改事件被多次触发一样。

Answer 1

我想我已经回答了我自己的问题。好吧，至少我得到了想要的结果。我刚在第一个on之后添加了一个对off的调用。不过，这似乎不是必要的。

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.



    });
}

});