Ember.js 从余烬表中删除项

我正在尝试添加一个带有控制器余烬操作的删除按钮。出于某种原因，

Ember.handlebar.compile（'Delete

返回一个函数，而不是已编译的字符串

这里有一个

以下是代码的相关部分：

App.ApplicationController = Ember.Controller.extend({

  columns: function() {
    ...

    buttonColumn = Ember.Table.ColumnDefinition.create({
      columnWidth: 100,
      headerCellName: 'Action',
      getCellContent: function(row) {
        var button = Ember.Handlebars.compile('<button {{action "deletePerson" this}}>Delete</button>');
        return button; // returns 'function (context, options) { ...'
      }
    });

    ...
  }.property()

  ...

App.ApplicationController=Ember.Controller.extend({
列：函数（）{
...
buttonColumn=Ember.Table.ColumnDefinition.create({
列宽：100，
headerCellName:“操作”，
getCellContent:函数（行）{
var button=Ember.handlebar.compile（'Delete'）；
return按钮；//返回函数（上下文，选项）{…'
}
});
...
}.property（）
...

在浏览了@fanta（）的链接并进行了大量的尝试和错误后，我发现它正常工作了

给你。 以下是一些要点：

除了在ColumnDefinition中使用

getCellContent

或

contentPath

之外，您还需要使用

tableCellViewClass

并创建一个处理单元格的视图

将

此

传递到按钮上的操作-并修改

内容

关闭该按钮。一个问题是编辑

内容

，您需要使用

余烬进行复制。复制

以下是相关代码：

App.ApplicationController=Ember.Controller.extend({
列：函数（）{
...
buttonColumn=Ember.Table.ColumnDefinition.create({
列宽：100，
headerCellName:“操作”，
tableCellViewClass:'App.PersonActionCell'
});        
...
}.property（），
OnContentDischange:function（）{
警报（“内容已更改！”）；
}.observes（'content.@each'），
...
});
App.PersonationCell=Ember.Table.TableCell.extend({
模板：Ember.handlebar.compile（'Delete'），
行动：{
删除人：功能（控制器）{
//没有Ember.copy将无法工作
var people=Ember.copy（controller.get（'content'））；
var row=this.get（'row'）；
//由于某些原因，people.indexOf（row）总是返回-1
var idx=row.get（'target'）.indexOf（row）；
人。剪接（idx，1）；
controller.set（'content'，people）；
}
}
});

我认为您做错了，在这里您可以找到如何在单元格中使用模板。

App.ApplicationController = Ember.Controller.extend({

  columns: function() {
    ...
    buttonColumn = Ember.Table.ColumnDefinition.create({
      columnWidth: 100,
      headerCellName: 'Action',
      tableCellViewClass: 'App.PersonActionCell'
    });        
    ...
  }.property(),

  onContentDidChange: function(){
    alert('content changed!');
  }.observes('content.@each'),
  ...
});

App.PersonActionCell = Ember.Table.TableCell.extend({
  template: Ember.Handlebars.compile('<button {{action "deletePerson" this target="view"}}>Delete</button>'),
  actions: {
    deletePerson: function(controller){
      // Will NOT work without Ember.copy
      var people = Ember.copy(controller.get('content'));

      var row = this.get('row');
      // For some reason people.indexOf(row) always returned -1
      var idx = row.get('target').indexOf(row);

      people.splice(idx, 1);
      controller.set('content', people);
    }
  }
});