Helpers in Ember.js

Here’s a quick guide to helpers in Ember.js, how to use them and how to create one of your own. This will be useful when you want the result of a JavaScript function in your template, believe me, this will make your front-end developer life easier.

In Ember a helper function is a simple function that gives you the ability to use the JavaScript logic in any template. Helpers can allow you to be more dynamic in passing data to another helper or component. A helper takes in a parameter which is passed to the function and then returns a value. You would use it like this inside of an Ember template,

Ember has some built-in helpers, but it also gives you the ability to write your own helpers.

Now I am going to tell you about some basic built-in Ember helpers and what are they used for with a quick explanation and a basic example.

Get a Property Dynamically

The {{get}} helper makes it easy to dynamically send the value of a variable to another helper or component. This can be useful if you want to output one of several values based on the result of a computed property,

If the this.part computed property returns “street”, the template will display the result of this.address.street.

In this example, if this.isFast is true, the {{if}} helper will return “really fast” to the template, and when it’s false it will return “not that fast”. And the {{unless}} helper is the opposite, it will check if the property is false.

Displaying a List of Items

The {{#each}} helper is used to iterate over a list of items. The first parameter to this helper is the array to be iterated, and the value being iterated is yielded as a block param. It is important to point out that block params are only available inside the block of their helper.

Check this template, it iterates an array named people that contains objects. Each item in the array is provided as the block param person.

The template inside of the {{#each}} block will be repeated once for each item in the array, with each item set to the person block param.Now let’s say that you also want to display the key of each property, then the {{#each-in}} helper will deal with that and it works similar to the {{#each}} helper. It just needs another block param for the key. It would look like this,

Actions

Your app will often need a way to let users interact with controls that change the application state. Imagine that you have a template with a button that shows a blog title, and when you click on it, it should modify the body of the page.When you add the {{action}} helper to any HTML DOM element, when a user clicks the element the named event will be sent to the template’s corresponding component or controller.

In the component or controller, you can define what the action does within the actions hook,

In this case, the action will ask for the toggleBody() function in the component and that will execute and return the value of the function toggleProperty(prop).

By default, the {{action}} helper identifies click events but you can specify any event by using the on option,

Creating Your Own Helper

At some point, built-in helpers won’t be enough and you will need to create your own custom helper. Maybe because you made a really complex function or just to use the result of a function in a really simple way on a template. For that, you have to import the buildHelper from the Ember component,

Let’s say you would like a helper that adds two numbers. First, you define a function in app/helpers/sum.js and then to create a sum helper you need to code,

Now you can use the sum() function as {{sum}} in your templates like,

Finally…

Helpers allow you to give additional functionality to your templates and are most useful for transforming raw values from models and components into a format more appropriate for your users. These are some of the commonly used helpers, now, I encourage you to check the rest and some more specific rules on how to create your own helper on the Ember guides.

If you have any questions or want to get started on Ember.js contact me at [email protected]

Focus Mode

Contact Request

Close

We will call you right away. All information is kept private