1

为了详细说明标题，我想要实现的是以下内容。

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

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

本质上，我想使用标头变量的值来绑定由该值调用的行对象中的属性（如果当前标头有值'title'，那么我想绑定到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: ''
        }
    ]
*/

经过研究，我在 Handlebars 文档中发现了这一点，上面说我可以访问如下属性：

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

根据文档，这与以下内容几乎相同：

articles[10]['#comments']

但是，使用：

rows.[header]

对我不起作用，因为它试图从字面上访问对象的'header'属性rows（即rows.header）而不是包含在标头变量中的值。

4

2 回答 2

0

您始终可以扩展 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>

（部分）工作解决方案在这里

于 2015-01-09T04:25:32.793 回答
0

现在可以在 Ember 中（从 1.13 起）使用新的很棒的内联助手mut和get轻松实现此功能：

实现这一点的方法分为两个基本步骤：

  1. 用于get动态查找r命名h为该each迭代中的任何值的属性。例如，如果h = 'title'，那么这将返回r['title']。
  2. 用于mut指定这个提取的值对于我们的输入组件（特别是它的 value 属性）是可变的。

整体是这样的each：

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

Ember Twiddle 的详细示例

于 2016-03-08T05:45:09.247 回答