Saving Only the changed record on a BackGrid grid?

Question

I am in the process of learning Backbone.js and using BackGrid to render data and provide the end user a way to edit records on an Microsoft MVC website. For the purposes of this test grid I am using a Vendor model. The BackGrid makes the data editable by default (which is good for my purpose). I have added the following JavaScript to my 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")

}

When the user edits a row, it successfully fires the hits the model.Save() method and passes the model to the save Action, in this case BackGridSave and it successfully saves the record that changed, but seems to save all of the vendors in model when only one of the vendors changed. Is there a way from the JavaScript/Backbone.js/BackGrid to only pass one Vendor - the vendor that changed?

Update: I realized that it is not sending every vendor, but it is sending the same vendor multiple times as though the change event was firing multiple times.

Answer 1

I guess I answered my own question. Well, at least I am getting the desired result. I just added a call to off after the first on. Seems like this would not be necessary though.

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.



    });
}

});