Handlebars relies on helpers for business logic inside the dynamic scripting blocks. Handlebars executes the business logic implemented inside the helpers (if any) placed inside the curly braces, or it simply performs data binding with bound attributes.

Ember ships a set of built-in helpers and provides a nice way of developing custom helpers too. Built-in helpers can be categorized as follows:

Helpers can either be inline or en bloc. Inline helpers are just one-liners, similar to empty HTML and XML tags. See the action helper, which is an inline helper that takes parameters for processing:

{{action 'editUser' user}}

Inline helpers can be nested, embedding more dynamic values inside them:

{{action 'editUser' user (format-date today format='MMM DD, YYYY')}}

Block helpers have a start and an end construct with the same name, similar to HTML tags:

{{#if isLoggedIn}}
    Welcome <strong>{{loggedInUser.fullName}}</strong>
{{/if}}

Templates can establish two-way data binding using input helpers. Input helpers are mostly HTML form elements wrapped inside Ember components or views. Ember ships some built-in input helpers, such as Ember.TextField, Ember.TextArea, and Ember.Checkbox. Let's take a look at an example:

{{input placeholder="User Name" value=editingUser.userName}}

{{input}} is a built-in input helper that wraps HTML input text fields and checkboxes based on the value of the type attribute, which defaults to text. It allows two-way binding between the generated <input type="text"/> tag and the attribute editingUser.userName. Whenever either of the values is changed, it updates the other participant of the two-way binding. The {{input}} helper supports many useful attributes, such as readonly, required, size, height, name, autofocus, placeholder, tabindex, and maxlength.

Checkboxes are created using the same {{input}} helper, but by setting the type attribute to checkbox. The {{textarea}} helper represents the HTML <textarea/> component.

You can create your own input helpers as Ember components, which we will learn later in this chapter.

Like most scripting languages, Handlebars supports the following control flow helpers:

Here is an example of the {{if}}, {{else}}, and {{else if}} helpers:

<div class="container">
{{#if isIdle}}
    You are idle for {{SessionService.idleMinutes}} minutes.
{{else if isLoggedIn}}
    Welcome <strong>{{loggedInUser.fullName}}</strong>
{{else}}
    <a {{action showLoginPopup}}>Please login</a>
{{/if}}
</div>

The {{#each}} helper is used to loop (iterate) through a collection, display it, and provide event hooks or actions around each element in the collection. A typical {{#each}} helper looks like this:

{{#each model as |user|}}
<tr>
<td><a {{action 'showUser' user }}>{{user.id}}</a></td>
<td>{{user.userName}}</td>
    ...
</tr>
{{/each}}

Event helpers respond to user-invoked actions. The two primary event helpers in Ember are the {{action}} and {{link-to}} helpers.

The {{link-to}} helper helps in navigating to another route. See the following example:

{{link-to "Login here" "login" class="btn btn-primary"}}

The {{action}} helper is generally added to a normal HTML element in order to attach an event and event handler to it:

<a {{action "editTask" _task}} class="btn btn-success">Edit</a>