Displaying a List of Items

To iterate over a list of items, use the {{#each}} helper. The first argument to this helper is the array to be iterated, and the value being iterated is yielded as a block param. Block params are only available inside the block of their helper.

For example, this template iterates an array named people that contains objects. Each item in the array is provided as the block param person.

<ul>
  {{#each this.people as |person|}}
    <li>Hello, {{person.name}}!</li>
  {{/each}}
</ul>

Block params, like function arguments in JavaScript, are positional. person is what each item is named in the above template, but human would work just as well.

The template inside of the {{#each}} block will be repeated once for each item in the array, with the each item set to the person block param.

Given an input array like:

[
  { name: 'Yehuda' },
  { name: 'Tom' },
  { name: 'Trek' }
]

The above template will render HTML like this:

<ul>
  <li>Hello, Yehuda!</li>
  <li>Hello, Tom!</li>
  <li>Hello, Trek!</li>
</ul>

Like other helpers, the {{#each}} helper is bound. If a new item is added to or removed from the iterated array, the DOM will be updated without having to write any additional code. That said, Ember requires that you use special methods to update bound arrays. Also be aware that using the key option with an each helper can improve re-render performance when an array is replaced with another containing similar items.

Accessing an item's index

<ul>
  {{#each this.people as |person index|}}
    <li>Hello, {{person.name}}! You're number {{index}} in line</li>
  {{/each}}
</ul>

Empty Lists

{{#each this.people as |person|}}
  Hello, {{person.name}}!
{{else}}
  Sorry, nobody is here.
{{/each}}