ember.js - 如何使用 handlebars.js 填充行内的单元格

Question

我是第一次尝试 ember.js/handlebars.js，虽然它非常简单，但我有一个简单的用例，我想不通。

使用以下数据：

var columns = ['col2', 'col3'], 
  rows = [{
    col1: 1,
    col2: 2,
    col3: 3 },
    {
    col1: 11,
    col2: 12,
    col3: 13 }
    ];

我怎样才能创建一个生成的模板：

<table>
<tr><td>2</td><td>3</td></tr>
<tr><td>12</td><td>13</td></tr>
</table>

换句话说，显示的单元格是基于columns数组的吗？

Answer 1

由于您似乎希望有选择地显示列，因此首先将您的rows/columns转换为具有所需特定行的数组：

 table: function() {
    var table,
        newRow,
        columns = this.get('columns'),
        rows = this.get('rows');

    table = [];
    rows.forEach(function(rowItem, rowIndex, rowEnumerable){
      newRow = [];
      columns.forEach(function(colItem, colIndex, colEnumerable){
        if (rowItem[colItem] !== undefined) {
          newRow.pushObject(rowItem[colItem]);
        }
      });
      table.pushObject(newRow);
    });

    return table;
  }.property('columns.@each', 'rows.@each')

这是一个计算属性，将包含一个行数组数组：

[
  [2,3],
  [12,13]
]

然后，您可以使用把手{{#each ... }}助手迭代每一行，并使用另一个{{#each ...}}助手迭代每一行中的每个单元格：

<table>
  {{log table}}
  {{#each row in table}}
    <tr>
      {{#each cell in row}}
        <td>{{cell}}</td>
      {{/each}}
    </tr>
  {{/each}}
</table>

JSBin 示例

Answer 2

也许这不是完整的解决方案，但作为一个起点，你可以这样做：

在您的模板中：

<table>
  {{#each row in model.rows}}
    <tr>
      {{#each col in model.columns}}
        <td>{{row}}</td>
      {{/each}}
    </tr>
  {{/each}}
</table>

并在您的路线中提供您的数据：

App.IndexRoute = Ember.Route.extend({
  model: function(){
    return Ember.Object.create({
        columns: ['col1', 'col2'],
        rows: [1, 2, 3, 11, 12, 13]
    });
  }
});

这是一个工作jsbin。

希望能帮助到你