ember.js - 从 ember-tables 中删除项目

Question

我正在尝试添加一个带有来自控制器的 ember 操作的删除按钮。由于某种原因Ember.Handlebars.compile('<button {{action "deletePerson"}}>Delete</button>返回一个函数而不是编译后的字符串。

这是一个jsbin

这是代码的相关部分：

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

  ...

Answer 1

在查看了来自@fanta（http://addepar.github.io/#/ember-table/editable）的链接和大量的试验和错误之后，我得到了它的工作。

这是工作的 jsbin。

以下是一些关键点：

1. 而不是在 ColumnDefinition 中使用getCellContentor contentPath，您需要使用tableCellViewClassand 创建一个视图来处理您的单元格
2. 传递this到按钮上的操作 - 并修改content它。一个问题是编辑content，你需要使用复制它Ember.copy

以下是相关代码：

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