Delete item from ember-tables

Question

I'm trying add a delete button with an ember action from a controller. For some reason Ember.Handlebars.compile('<button {{action "deletePerson"}}>Delete</button> returns a function and not the compiled string.

Here's a jsbin

Here's the relevant portion of code:

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

After looking through the link from @fanta (http://addepar.github.io/#/ember-table/editable) and a lot of trial and error, I got it working.

Here's the working jsbin.

Here are some key points:

1. Instead of using getCellContent or contentPath in the ColumnDefinition, you need to use tableCellViewClass and to create a view that will handle your cell
2. Pass in this to the action on your button — and modify content off that. One gotcha is to edit content, you need to copy it using Ember.copy

Here's the relevant code:

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