I am currently working on developing a modular tabular form that requires an input of two arrays: one containing objects (representing the rows) and another containing property names of those objects (representing the columns). The goal is to be able to modify these properties using Ember.TextFields within the form.
Unfortunately, I'm facing difficulties in achieving this functionality. While I can retrieve the values of the properties (as demonstrated in the code snippet below), they are raw values and not references. Therefore, the bindings to these values do not update the properties of the objects as intended.
View
App.SomeTabularForm = Em.View.extend({
template: <see below>,
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.[]')
});
Template
<table>
<tr>
{{#each view.fieldNames}}
<th>{{this}}</th>
{{/each}}
<tr>
{{#each view.thingsWithFields}}
<tr>
{{#each fields}}
<td>
{{! FIX: does not actually bind to thing's property }}
{{input type="text" valueBinding="this"}}
</td>
{{/each}}
</tr>
{{#each}}
</table>