Template syntaxes & helpers – Ember.js Tutorial part 3

I’m using Ember 2.10.0 here

It’s the third post of our Ember tutorial series. How to start with ember.js has already be covered in part 1 and part 2 and in this post we will talk about the templates in Ember. We will go through all the syntaxes of handlebars, which is the template engine of Ember.js.

Like any other template engine, handlebar’s concept also circles around the code concept of data binding. The handlebars file extensions are .hbs and it looks like a HTML file with some dynamic data in it, wrapped in double curly braces {{}}. The syntaxes have been described below.

{{doubleCurlyBraces}}

With double curly braces, you can display the value of any variable. If at any point the value of that variable gets changed, the new value will automatically be reflected in the DOM.

Let’s make it work in our ongoing application in this ember tutorial series. Modify the application.js controller and application.hbs template as follows.

app/controllers/application.js

app/templates/application.hbs

If you check the output in localhost:4200 in the browser, you will find it will display Hello Void Canvas first and after 5 seconds it will be changed to Hello Paul Shan. So, double curly braces not only displays the value, but also changes the value displayed if the original one changes.

Helpers

Before moving to the other template syntaxes, you need to know about helpers, cause most of the remaining syntaxes are nothing but inbuilt syntaxes.
Helper is to Handlebars as function is JavaScript. You can not call a JavaScript function directly from the template, but you can call a helper, which is nothing but kind of a function.
Let’s create a helper named sum.

After running the above command, a helper names sum.js will be generated in app/helpers/. You can put the following code in that file.

Now if you put {{sum 1 1}} in your application.hbs or any other template, it will be displayed in the browser as 2.

You can even use nested helpers.

So this is how a helper works.

All inbuilt helpers

if, else & unless

The if helper works as above. the first parameter is the condition and 2nd one is the true statement and the last one is the false one. Just like our custom sum helper you can also use nested if helper.

You can also do block invocation of if helper using a #. Below is an example.

Block invocation helps to put conditional template.

After if and else, there’s another conditional helper called unless, which is nothing but if not. An example is as below.

each helper

The helper each is used to iterate through an array. Below is an example.

For the array above, we can write an each helper like below.

First parameter of each helper is the array to be iterated and the two block parameters are the alias for each array element and the index of that element. Remember block parameters are accessible only inside the helper.

Helper each also comes with an else part, which is executed when the given array is empty.

each-in

Helper each-in is very much similar to each helper. Instead of array, each-in deals with an object and the block parameters are key and value consecutively. Below is an example.

For the array above, we can write an each helper like below.

Helper each-in also has else like each helper, which is executed if the Object to be iterated has no keys in it.

This helper link-to works like the anchor tags in HTML. It takes the route name as first parameter. The rest of the parameters depends on the route itself. We will talk in brief about this in the Router tutorial; but for the time being below is a simple example.

The two lines above will generate a html like the following.

action

action is one of the most important things in ember, cause, the user must interact with the application and the application should also respond accordingly. The action helper is used to capture events like click, mouseUp etc and take appropriate steps after they occur. The action callback must be declared in your JavaScript code and handlebars will just execute that once the user interacts.

In our case, lets write an action in our controller.

Now attach the action in hbs.

Once you click on the h1 tag in the browser, the alert will come up with the message “I am triggered”. Remember, the triggerMe function must be inside an object named actions. Ember only considers the functions inside the actions object as proper actions.

You can also pass parameters to the actions. Here is an example.

.

action is not just for click. It can be for any event. You just have to mention that with on attribute.

input helpers

For input fields like, textbox, checkbox, radio etc, you can use the input helper of ember. Below are few simple examples to make you understand the basic of it.

If we change our application.hbs with the following code, you will see the myVal is reflecting whenever changes.

ember-template-syntax-input

To invoke an action you need to code like below.

There are many other attributes supported for input helpers. You can find them in ember-guide.

Next Part

After this article hope you are able to write simple templates and know how the binding etc works. In the next part of this series of ember tutorial, we will talk about Objects in Ember, computed properties and observers.

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.