javascript - Ember 每个循环加倍。使用内部每个循环变量的值绑定(bind)到外部每个循环的变量中名称相同的属性

Question

为了详细说明标题，我想要实现的目标如下。

我正在 Ember 中构建一个交互式表格组件。这是剥离后的模板:

<table>
    <thead>
        <tr>
            {{#each header in headers}}
                <th>{{header}}</th>
            {{/each}}
        </tr>
    </thead>
    <tbody>
        {{#each row in rows}}
        <tr>
            {{#each header in headers}}
                <td>{{input value=row.[header]}}</td> <!-- can I bind to row.header here somehow? -->
            {{/each}}
        </tr>
        {{/each}}
    </tbody>
</table>

我希望特定行和特定列的每个输入字段都绑定(bind)到该行的 row 对象，特别是绑定(bind)到以标题列命名方式命名的属性。

本质上，我想使用 header 变量的值来绑定(bind)该值调用的行对象中的属性(如果当前 header 的值为 'title' 那么我想绑定(bind)到 row.title)

以下是我如何初始化这些对象的示例:

var headers = ['title','description'];

var rows = [],
    row = {};

for(var i = 0; i < headers.length; i++) {
    row[headers[i]] = '';  // this line does similar thing to what I am trying to achieve
}

rows.push(row);

/* This gives

    rows = [
        {
            title: '',
            description: ''
        }
    ]
*/

经过研究，我发现this在 Handlebars 文档中，我可以访问如下属性:

{{#each articles.[10].[#comments]}}
    ...
{{/each}}

根据文档，这几乎与:

articles[10]['#comments']

但是，使用:

rows.[header] 

对我不起作用，因为它尝试从字面上访问 rows 对象的 'header' 属性(即 rows.header ) 而不是 header 变量中包含的值。

Answer 1

您始终可以扩展文本字段组件，并至少获得您正在寻找的值。

App.DynamicInputComponent = Ember.TextField.extend({
  row: null,
  col: null,
  value: function(){
    var row = this.get('row');
    var col = this.get('col');

    return row[col];
  }.property('row', 'col')
});

然后，在您的模板中您可以执行以下操作:

<table>
  {{#each item in model}}
  <tr>
    {{#each col in columns}}
      <td> {{ dynamic-input type='text' row=item col=col }} </td>
    {{/each}}
  </tr>
  {{/each}}
</table>

(部分)工作解决方案here