title: Ember tabular form with objects for rows and property names for columns
body: <p>I am trying to create a modular tabular form that takes an input of 1) an array of objects (the rows) and 2) an array of property names of those objects (the columns). Through these two arrays, it should retrieve properties that can be modified through Ember.TextFields in the form.</p>
  
  <p>I cannot figure out how to do this. I can retrieve the values of the properties (as shown in the code below) but they are raw values, rather than references, so the bindings to these do not update the objects' properties.</p>
  
  <h2>View</h2>
  
  <pre><code>App.SomeTabularForm = Em.View.extend({
    template: &lt;see below&gt;,
  
    things: [
      Em.Object.create({ foo: 'a', bar: 'b' }), 
      Em.Object.create({ foo: 1, bar: 2 })
    ],
    fieldNames: ['bar', 'foo'],
  
    thingsWithFields: function() {
      var fieldNames = this.get('fieldNames');
  
      var thingWithFieldsProxy = Em.ObjectProxy.extend({
        fields: function() {
          var thing = this;
  
          return fieldNames.map(function(fn) {
            // FIX: this returns a raw value which is not bindable in a template
            return thing.get(fn);
          });
        }.property()
      });
  
      return this.get('things').map(function(t) {
        return thingWithFieldsProxy.create({ content: t });
      });
    }.property('things.[]', 'fields.[]')
  });
  </code></pre>
  
  <h2>Template</h2>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      {{#each view.fieldNames}}
        &lt;th&gt;{{this}}&lt;/th&gt;
      {{/each}}
    &lt;tr&gt;
  
    {{#each view.thingsWithFields}}
      &lt;tr&gt;
        {{#each fields}}
          &lt;td&gt;
            {{! FIX: does not actually bind to thing's property }}
            {{input type="text" valueBinding="this"}}
          &lt;/td&gt;
        {{/each}}
      &lt;/tr&gt;
    {{#each}}
  &lt;/table&gt;
  </code></pre>