Ember.js / Handlebars嵌套每次迭代 [英] Ember.js / Handlebars nested each iterations

问题描述

有一个应该代表一个表的视图，它具有列和行：

Having a view that should represent a table, having columns and 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' }
  ]
});

- 分别为模板：

- respectively a template:

<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}} 完全不会被触发。这是为什么？什么是更好的方法？

I obviously can not iterate over columns when nested in rows. {{#each ../columns}} simply is not triggered at all. Why is that? What is a better approach?

推荐答案

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

Ember doesn't really support the file path identifiers from Handlebars. You can however access via 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/

查看你的代码片段，我建议你看看使用 {{ #collection}} 而不是 {{＃each}} ，它不会缓解这个问题，但它会让你的代码更加清晰（IMO ）。

Looking at your code snippet, I suggest you look at using {{#collection}} instead of {{#each}} as well, it won't alleviate that issue but it makes your code cleaner (IMO).

这篇关于Ember.js / Handlebars嵌套每次迭代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！