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

Question

我正在学习 Backbone.js 并使用 BackGrid 呈现数据并为最终用户提供一种在 Microsoft MVC 网站上编辑记录的方法。出于此测试网格的目的，我使用 vendor 模型。 BackGrid 默认使数据可编辑(这对我的目的很有好处)。我已将以下 JavaScript 添加到我的 View 中。

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 并成功保存更改的记录，但似乎保存了所有当只有一个 vendor 发生变化时模型中的 vendor 。有没有一种方法可以从 JavaScript/Backbone.js/BackGrid 只传递一个 vendor - 更改的 vendor ？

更新:我意识到它并没有发送每个 vendor ，而是多次发送同一 vendor ，就好像更改事件多次触发一样。

Answer 1

我想我回答了我自己的问题。好吧，至少我得到了想要的结果。我刚刚在第一次打开后添加了一个关闭电话。看来这没有必要。

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.



    });
}

});