emberjs嵌套{{#each}}无效

Question

我很贪图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

<强> HBS

<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]);
});

<强> HBS

    <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>