Binding Arbitrary Keys (i.e an editable table)

1

I’m working on a project that will essentially have users defining arbitrary columns in a table, and then editing the values across many rows. The Table basically just has a name and a fields value that is an array of column names. The Rows are basically just table_id plus a bunch of key-values based on whatever fields their table has.

For the rows, I was essentially trying to write something like this:

<tbody>
  {{#each row in rows}}
    <tr>
      {{#each field in fields}}
        <td contenteditable>{{row[field]}}</td>
      {{/each}}
    </tr>
  {{/each}}
</tbody>

Of course row[field] isn’t valid, but it illustrates the idea of what I’m trying to do. I tried writing a lookup helper:

Ember.Handlebars.registerBoundHelper('lookup', function(object, key) {
    return object.get('key');
});

So that the <td> lines are written as <td contenteditable>{{lookup row field}}</td>, but this appears to result in an unbound value being rendered.

It feels like this should be really simple and I’m just doing something obviously wrong, so any advice here would be greatly appreciated.

3 Likes