Help me obi-bryn kenobi... you're my only hope

demo.hbs

I have a table component that works like this (basically):

{{#nf-table data=someData}}
  {{#nf-column}}
    {{#nf-header}}Foo{{/nf-header}}
    {{#nf-cell}}<button {{action 'fooClicked'}}>{{foo}}</button>{{/nf-cell}}
  {{/nf-column}}
  {{#nf-column}}
    {{#nf-header}}Bar{{/nf-header}}
    {{#nf-cell}}{{bar}}{{/nf-cell}}
  {{/nf-column}}
{{/nf-table}}

and outputs:

<table>
  <thead>
    <tr>
      <th>Foo</th>
      <th>Bar</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><button action-crap-here>foo value 1</button></td>
      <td>bar value 1</td>
    <tr>
    <tr>
      <td><button action-crap-here>foo value 2</button></td>
      <td>bar value 2</td>
    <tr>
    <!-- snip -->
    <tr>
      <td><button action-crap-here>foo value 100</button></td>
      <td>bar value 100</td>
    <tr>
  </tbody>
</table>

demo.js

export default Ember.ObjectController.extend({
  data: [{ foo: 'foo value 1', bar: 'bar value 1' }, { foo: 'foo value 2', bar: 'bar value 2' }/* ... more ... */]
  actions: {
    fooClicked: function() {
      // THIS DOESN'T GET HIT. :(
      console.log('foo was clicked');
    }
  }
})

nf-table.hbs

<table>
  <thead>
    <tr>
    {{#each col in columns}}
      {{view 'nf-table-header' template=col.headerTemplate}}
    {{/each}}
    </tr>
  </thead>
  <tbody>
    {{#each row in data}}
    <tr>
      {{#each col in columns}}
        {{view 'nf-table-cell' template=col.cellTemplate}}
      {{/each}}
    </tr>
    {{/each}}
  </tbody>
</table>