Handlebars Basics

Handlebars Basics

Ember uses the Handlebars templating library to power your app's user interface. Handlebars templates contain static HTML and dynamic content inside Handlebars expressions, which are invoked with double curly braces: {{}}.

Dynamic content inside a Handlebars expression is rendered with data-binding. This means if you update a property, your usage of that property in a template will be automatically updated to the latest value.

Displaying Properties

Templates are backed with a context. A context is an object from which Handlebars expressions read their properties. In Ember this is often a component. For templates rendered by a route (like application.hbs), the context is a controller.

For example, this application.hbs template will render a first and last name:

Hello, <strong>{{firstName}} {{lastName}}</strong>!

The firstName and lastName properties are read from the context (the application controller in this case), and rendered inside the <strong> HTML tag.

To provide a firstName and lastName to the above template, properties must be added to the application controller. If you are following along with an Ember CLI application, you may need to create this file:

import Ember from 'ember';

export default Ember.Controller.extend({
  firstName: 'Trek',
  lastName: 'Glowacki'
});

The above template and controller render as the following HTML:

Hello, <strong>Trek Glowacki</strong>!

Remember that {{firstName}} and {{lastName}} are bound data. That means if the value of one of those properties changes, the DOM will be updated automatically.

As an application grows in size, it will have many templates backed by controllers and components.

Helpers

Ember gives you the ability to write your own helpers, to bring a minimum of logic into Ember templating.

For example, let's say you would like the ability to add a few numbers together, without needing to define a computed property everywhere you would like to do so.

import Ember from 'ember';

export function sum(params) {
  return params.reduce((a, b) => {
    return a + b;
  });
};

export default Ember.Helper.helper(sum);

The above code will allow you invoke the sum() function as a {{sum}} handlebars "helper" in your templates:

<p>Total: {{sum 1 2 3}}</p>

This helper will output a value of 6.

Ember ships with several built-in helpers, which you will learn more about in the following guides.

Nested Helpers

Helpers have the ability to be nested within other helper invocations and also component invocations.

This gives you the flexibility to compute a value before it is passed in as an argument or an attribute of another.

It is not possible to nest curly braces {{}}, so the correct way to nest a helper is by using parentheses ():

{{sum (multiply 2 4) 2}}

In this example, we are using a helper to multiply 2 and 4 before passing the value into {{sum}}.

Thus, the output of these combined helpers is 10.

As you move forward with these template guides, keep in mind that a helper can be used anywhere a normal value can be used.

Thus, many of Ember's built-in helpers (as well as your custom helpers) can be used in nested form.