Javascript 余烬双倍每个循环。使用内部每个循环变量的值绑定到外部每个循环变量中名为相同的属性

为了详细说明这个标题，我试图实现以下目标

我正在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>

经过研究，我在车把文档中发现，我可以访问如下属性：

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

根据文件，这与：

articles[10]['#comments']

但是，使用：

rows.[header] 

---

对我来说不起作用，因为它试图从字面上访问

行

对象（即

行.header

）的

'header'

属性，而不是header变量中包含的值。

您始终可以扩展textfield组件，至少可以获得所需的值

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>

{{{#模型中的每个项目}
{{#列中的每个列}}
{{dynamic input type='text'row=item col=col}}
{{/每个}}
{{/每个}}

---

（部分）工作解决方案

此功能现在可以在Ember（）中轻松实现，使用新的非常棒的内联帮助程序和：

实现这一目标的方法有两个基本步骤：

使用

get

从

r

中动态查找一个属性，该属性被命名为

h

在该

每次迭代中的值。例如，如果
h='title'
，则返回
r['title']

使用
mut
指定此提取的值可由输入组件（特别是其值属性）更改
这是整个
每个
的外观：

{{#each rows as |r|}}
<tr>
  {{#each headers as |h|}}
  <td>
    <input onkeyup={{action (mut (get r h)) value="target.value" }}>
  </td>
  {{/each}}
</tr>
{{/each}}

{{{#每行为| r}
{{{#每个标题为| h}
{{/每个}}
{{/每个}}

根据设计，把手不允许模板中出现这种程度的“逻辑”。您必须在控制器或视图中对数据进行一些准备，以使其形成把手可以轻松吐出的形状。谢谢，我不确定是否有某种方式可以访问把手未记录或至少不在明显位置的这些属性。尽管我更喜欢按照我在这里提到的方式做事情，而且这样做会更干净，但我编写了一个解决方案，它满足了我的需要，而不是我所需要的。我对
row[col]
的值不感兴趣，但我想将输入字段的值绑定到
row
对象中的属性
col
，这样每次用户键入内容时，它都会由Ember自动计算。
{{#each rows as |r|}}
<tr>
  {{#each headers as |h|}}
  <td>
    <input onkeyup={{action (mut (get r h)) value="target.value" }}>
  </td>
  {{/each}}
</tr>
{{/each}}