eachpublic
The {{#each}} helper loops over elements in a collection. It is an extension of the base Handlebars {{#each}} helper.
The default behavior of {{#each}} is to yield its inner block once for every item in an array passing the item as the first block parameter.
1 | var developers = [{ name: 'Yehuda' },{ name: 'Tom' }, { name: 'Paul' }]; |
1 2 3 4 | {{#each developers key="name" as |person|}} {{person.name}} {{! `this` is whatever it was outside the #each }}{{/each}} |
The same rules apply to arrays of primitives.
1 | var developerNames = ['Yehuda', 'Tom', 'Paul'] |
1 2 3 | {{#each developerNames key="@index" as |name|}} {{name}}{{/each}} |
During iteration, the index of each item in the array is provided as a second block parameter.
1 2 3 4 5 | <ul> {{#each people as |person index|}} <li>Hello, {{person.name}}! You're number {{index}} in line</li> {{/each}}</ul> |
Specifying Keys
The key option is used to tell Ember how to determine if the array being iterated over with {{#each}} has changed between renders. By helping Ember detect that some elements in the array are the same, DOM elements can be re-used, significantly improving rendering speed.
For example, here's the {{#each}} helper with its key set to id:
1 2 | {{#each model key="id" as |item|}}{{/each}} |
When this {{#each}} re-renders, Ember will match up the previously rendered items (and reorder the generated DOM elements) based on each item's id property.
By default the item's own reference is used.
{{else}} condition
{{#each}} can have a matching {{else}}. The contents of this block will render if the collection is empty.
1 2 3 4 5 | {{#each developers as |person|}} {{person.name}}{{else}} <p>Sorry, nobody is available for this task.</p>{{/each}} |
Please login to continue.