Question

我正在学习Backbone.js并使用BackGrid呈现数据并为最终用户提供编辑Microsoft MVC网站上的记录的方法。出于此测试网格的目的，我使用的是供应商模型。 BackGrid默认情况下可以编辑数据（这有利于我的目的）。我在我的视图中添加了以下JavaScript。

＆＃13;

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 });

＆＃13;

@{
    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")

}

＆＃13;

当用户编辑一行时，它成功触发了model.Save（）方法的命中并将模型传递给save Action，在这种情况下BackGridSave并且它成功保存了已更改的记录，但似乎保存了所有当只有一家供应商改变时，模型中的供应商。有没有办法从JavaScript / Backbone.js / BackGrid只传递一个供应商 - 更改的供应商？

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

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.



    });
}

});

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

1 个答案: