CODEWITHSUNDEEP
ember.jshandlebars.js
pex
pex

Reputation: 7761

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>

... which can be found on jsfiddle as well: jsfiddle.net/nWnf2

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?

Upvotes: 1

Views: 2575

Answers (1)

Bradley Priest
Bradley Priest

Reputation: 7458

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/

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

Upvotes: 4

Related Questions