Удалить элемент из таблиц

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/) и много проб и ошибок, я понял, что это работает.

Вот рабочий jsbin.

Вот несколько ключевых моментов:

1. Вместо того, чтобы использовать getCellContent или же contentPath в ColumnDefinition вам нужно использовать tableCellViewClass и создать представление, которое будет обрабатывать вашу ячейку
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);
    }
  }
});