Built-In Helpers

Ember ships a small but expressive set of template helpers — control flow plus inline value builders.

4 min read Level 2/5 #ember#helpers#templates

What you'll learn

Use the if and each block helpers for control flow
Use the fn helper to partially apply arguments
Use hash and array helpers to build inline data

Ember keeps its template DSL intentionally small. A handful of built-in helpers cover control flow, callbacks, and inline data construction.

Control Flow: if, unless, each

{{#if this.loading}}
  Loading...
{{else if this.error}}
  Something broke.
{{else}}
  {{#each this.posts as |post index|}}
    <PostCard @post={{post}} @index={{index}} />
  {{/each}}
{{/if}}

{{#unless this.user.verified}}
  <p>Please verify your email.</p>
{{/unless}}

{{#each}} exposes the iteration value plus an index. There is also {{#each-in}} for iterating object keys.

Callbacks: fn

fn partially applies arguments to a function — handy in loops:

{{#each @items as |item|}}
  <button {{on "click" (fn this.delete item.id)}}>
    Delete {{item.name}}
  </button>
{{/each}}

When the button fires, this.delete receives item.id followed by the native event.

Inline Data: hash, array, concat

<Avatar @user={{hash name="Ada" role="admin"}} />

<Tabs @items={{array "Profile" "Settings" "Billing"}} />

<a href="{{concat "/users/" @user.id}}">Profile</a>

hash builds an object, array builds an array, and concat builds a string. They are pure helpers — re-evaluated whenever their inputs change.

Custom Helpers →