Ember.js / Handlebars 嵌套每个迭代答案

【问题标题】：Ember.js / Handlebars nested each iterationsEmber.js / Handlebars 嵌套每个迭代
【发布时间】：2012-07-30 08:40:44
【问题描述】：

有一个应该代表一个表的视图，有columns 和rows：

App.ListView = Ember.View.extend({
  templateName: 'list',
  columns: ['t1', 't2', 't3'],
  rows: [
    { t1: 'one', t2: 'two', t3: 'three' },
    { t1: 'two', t2: 'one', t3: 'seven' }
  ]
});

-分别是一个模板：

<table>
<thead>
  <tr>
  {{#each columns}}
    <th>{{this}}</th>
  {{/each}}
  </tr>
</thead>
<tbody>
{{#each rows}}
  <tr>
  {{#each ../columns}}
    <td>does nothing: {{this}}</td>
  {{/each}}
  </tr>
{{/each}}
<tbody>
<table>

...也可以找到on jsfiddle：jsfiddle.net/nWnf2

当嵌套在行中时，我显然不能迭代列。 {{#each ../columns}} 根本没有被触发。这是为什么？有什么更好的方法？

【问题讨论】：

标签： ember.js handlebars.js

【解决方案1】：

Ember 并不真正支持 Handlebars 中的文件路径标识符。但是，您可以通过view.columns 访问。

<table>
  <thead>
    <tr>
    {{#each columns}}
      <th>{{this}}</th>
    {{/each}}
    </tr>
  </thead>
  <tbody>
  {{#each rows}}
    <tr>
    {{#each view.columns}}
      <td>does nothing: {{this}}</td>
    {{/each}}
    </tr>
  {{/each}}
  <tbody>
<table>

http://jsfiddle.net/L7MAp/

查看您的代码 sn-p，我建议您也考虑使用 {{#collection}} 而不是 {{#each}}，它不会缓解该问题，但它会使您的代码更清晰 (IMO)。

【讨论】：