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

Question

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

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

文档说BackGrid。celleitor和一些代码显示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链接

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