home
  • Blog
1.10
  • Getting Started
  • Getting Ember
  • Concepts
  • The Object Model
  • Application
  • Templates
    • The Application Template
    • Handlebars Basics
    • Conditionals
    • Displaying a List of Items
    • Binding Element Attributes
    • Binding Element Class Names
    • Links
    • Actions
    • Input Helpers
    • Development Helpers
    • Rendering with Helpers
    • Writing Helpers
  • Routing
  • Components
  • Controllers
  • Models
  • Views
  • Enumerables
  • Testing
  • Configuring Ember.js
  • Cookbook
  • Understanding Ember.js
  • Contributing to Ember.js
Old Guides - You are viewing the guides for Ember v1.10.0.
Go to v5.0.0

Displaying a List of Items

Edit pencil

If you need to enumerate over a list of objects, use Handlebars' {{#each}} helper:

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

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

The above example will print a list like this:

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

Like everything in Handlebars, the {{#each}} helper is bindings-aware. If your application adds a new item to the array, or removes an item, the DOM will be updated without having to write any code.

The {{#each}} helper can have a matching {{else}}. The contents of this block will render if the collection is empty:

{{#each person in people}}
  Hello, {{person.name}}!
{{else}}
  Sorry, nobody is here.
{{/each}}
left arrow
Conditionals
Binding Element Attributes
right arrow
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