在 backgrid.js 中编辑后如何传递可编辑单元格内容

Question

这是我的 grid.js，它从数据库中填充数据。我设置了所有代码，一切正常。单击可编辑字段后，我希望将特定数据传递到后端。我怎样才能做到这一点？

因为这是这里的一个例子，我没有创建JSFIDDLE

文档说 BackGrid.CellEditor 和一些代码说 this.listenTo()

很遗憾，我不知道如何将它嵌入到这段代码中。

感谢您的帮助。

var Territory = Backbone.Model.extend({});

var PageableTerritories = Backbone.PageableCollection.extend({
  model: Territory,
// url: "./json/territories.json",
  url: "./api.php",
  state: {
    pageSize: 15
  },
  mode: "client" // page entirely on the client side
});

var pageableTerritories = new PageableTerritories();

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: "name",
    label: "Name",
    // The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
    cell: "string" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
  }, {
    name: "pop",
    label: "Population",
    cell: "integer" // An integer cell is a number cell that displays humanized integers
  }, {
    name: "percentage",
    label: "% of World Population",
    cell: "number" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
  }, {
    name: "date",
    label: "Date",
    cell: "date" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
  }, {
    name: "url",
    label: "URL",
    cell: "uri" // Renders the value in an HTML anchor element
}];


// Set up a grid to use the pageable collection
var pageableGrid = new Backgrid.Grid({
  columns: [{
    // enable the select-all extension
    name: "",
    cell: "select-row",
    headerCell: "select-all"
  }].concat(columns),
  collection: pageableTerritories
});

// Render the grid
var $example2 = $("#example-1-result");

$example2.append(pageableGrid.render().el)

// Initialize the paginator
var paginator = new Backgrid.Extension.Paginator({
  collection: pageableTerritories
});

// Render the paginator
$example2.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: pageableTerritories,
//  fields: ['name']
//});

// Render the filter
//$example2.before(filter.render().el);

// Add some space to the filter and move it to the right
//$(filter.el).css({float: "right", margin: "20px"});

// Fetch some data
pageableTerritories.fetch({reset: true});

我创建了下载主干模板。我在这里分享完整的项目文件 共享完整的项目文件夹 Dropbox Link

Answer 1

看起来很简单。他们不嘲笑任何东西，他们保持模型完好无损。你可以这样做：

// REPLACE your current line: var Territory = Backbone.Model.extend({});
// with this \/
var Territory = Backbone.Model.extend({
  initialize: function(){
    Backbone.Model.prototype.initialize.apply(this, arguments);
    this.on('change', this.checkIfChanged);
  },
  checkIfChanged: function(){
    alert(this.get('id').toString() + ' changed: ' + JSON.stringify(this.changed))
  }
});

并保持其余代码不变。

如果您想查看之前的内容，请记住有一个 this._previousAttributes。

注意：如果您想在此之后保存，我真的建议您将其包裹在 _.debounce(this.checkIfChanged, 500 or 1000) 周围，这样您就不会让用户背靠背保存。

Answer 2

这个解决方案对我有用。我在我的文件的 grid.js 中更新了这个。感谢@Javier Buzzi。

Backbone.Model.extend({
initialize: function () {
            Backbone.Model.prototype.initialize.apply(this, arguments);
            this.on("change", function (model, options) {
                console.log("Saving change " + JSON.stringify(options) );
              if (options && options.save === false) return;
              model.save();
            });
          }
});