Emberjs嵌套{{#each}}不工作

Question

我是ember js的新手。

我正在尝试在我的页面中形成一个数据网格。

模态

{
"tableView":{
    "columns":[{"name":"EmpName","datatype":"string"},{"name":"Age","datatype":"numeric"}],
    "records":[{"EmpName":"Ramesh","Age":12},{"EmpName":"Mukesh","Age":31},{"EmpName":"Mahesh","Age":22}]
    }
}

模板

<script type="text/x-handlebars" data-template-name="grid">
<table>
<thead>
<tr>
    {{#each tableView.columns}}
    <th>    {{name}}</th>
    {{/each}}
</tr>
</thead>
<tbody>
{{#each record in tableView.records}}
<tr>
 {{#each column in tableView.columns}}
    <td>{{record[column.name]}}</td>
 {{/each}}
</tr>
{{/each}}
</tbody>
</table>
</script>

结果，包含列的表头显示正确。但是数据不是在表中生成的，没有错误。

我在内部{{#each}}做错了什么吗??

Answer 1

要用记录呈现表，您可以尝试如下操作:

http://emberjs.jsbin.com/nahanoje/1/edit

哈佛商学院

<table>
<thead>
<tr>
    {{#each model.tableView.columns}}
    <th>    {{name}}</th>
    {{/each}}
</tr>
</thead>
<tbody>
{{#each record in model.tableView.records}}
<tr>
    <td>{{record.EmpName}}</td>
    <td>{{record.Age}}</td>
</tr>
{{/each}}
</tbody>
</table>

在原始代码张贴的{{record[column.name]}}部分将无法工作。

如果你需要一个嵌套的{{each}}助手来动态地获取任意数量的列的值，那么为这个特定的任务注册的助手将真正帮助。

http://emberjs.jsbin.com/foqohibe/1/edit

js

App.IndexRoute = Ember.Route.extend({
  model: function() {
    var data = {
"tableView":{
    "columns":[{"name":"EmpName","datatype":"string"},{"name":"Age","datatype":"numeric"}],
    "records":[{"EmpName":"Ramesh","Age":12},{"EmpName":"Mukesh","Age":31},{"EmpName":"Mahesh","Age":22}]
    }
};
    return data;
  }
});
Ember.Handlebars.helper('getRecord', function(value, options) {
  var record = arguments[0];
  var columnName = arguments[1];
  return new Handlebars.SafeString(record[columnName]);
});

哈佛商学院

    <table>
<thead>
<tr>
    {{#each model.tableView.columns}}
    <th>    {{name}}</th>
    {{/each}}
</tr>
</thead>
<tbody>
{{#each record in model.tableView.records}}
<tr>
{{#each column in model.tableView.columns}}
{{#with column}}
<td>{{getRecord record name}}</td>
{{/with}}
{{/each}}    
</tr>
{{/each}}
</tbody>
</table>