home
  • Blog
2.12
  • Getting Started
  • Tutorial
  • The Object Model
  • Routing
  • Templates
    • Handlebars Basics
    • Built-in Helpers
    • Conditionals
    • Displaying a List of Items
    • Displaying the Keys in an Object
    • Binding Element Attributes
    • Links
    • Actions
    • Input Helpers
    • Development Helpers
    • Writing Helpers
  • Components
  • Controllers
  • Models
  • Application Concerns
  • Testing
  • Ember Inspector
  • Addons and Dependencies
  • Configuring Ember.js
  • Contributing to Ember.js
  • Glossary
Old Guides - You are viewing the guides for Ember v2.12.0.
Go to v5.0.0

Displaying a List of Items

Edit pencil

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

During iteration, the index of each item in the array is provided as a second block param. Block params are space-separated, without commas. For example:

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

Empty Lists

The {{#each}} helper can have a corresponding {{else}}. The contents of this block will render if the array passed to {{#each}} is empty:

{{#each people as |person|}}
  Hello, {{person.name}}!
{{else}}
  Sorry, nobody is here.
{{/each}}
left arrow
Conditionals
Displaying the Keys in an Object
right arrow
On this page

  • Accessing an item's index
  • Empty Lists
Team Sponsors Security Legal Branding Community Guidelines
Twitter GitHub Discord Mastodon

If you want help you can contact us by email, open an issue, or get realtime help by joining the Ember Discord.

© Copyright 2023 - Tilde Inc.
Ember.js is free, open source and always will be.


Ember is generously supported by
blue