如何通过编辑后的可编辑单元格内容在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(); 
      }); 
      } 
});