EmberJS - Writing Helpers

You can add extra functionality to the templates and convert the raw values from models and components into proper format for the users. If you are using the HTML application multiple times, then you can add a custom helper from any Handlebars template. If the current context changes, then Ember.js will automatically execute the helper and updates the DOM with the updated value.

Syntax

export function Helper_Name([values]) {
   //code here
}

export default Ember.Helper.helper(Helper_Name);

The following table lists down the different ways of using helper names −

Example

The example given below implement the helper, which takes more than one input and returns single output. Create a new helper with the following command −

ember generate helper helper-name

In this example, we have created the helper with the name writinghelper. Now open the writinghelper.js file which is created under app/helpers/.

import Ember from 'ember';

export function formatHelper([value]) {
   let var1 = Math.floor(value * 100);
   let cents = value % 100;
   let var3 = '$';
   if (cents.toString().length === 1)
   return `${var3}${var1}`;
}

export default Ember.Helper.helper(formatHelper);

You can use the "writinghelper" helper in the template within curly braces. Open the index.hbs file and write the following code −

Value is : {{writinghelper 5}}
{{outlet}}

In the above code, we have passed the helper value in the template, which displays the count of cents into formatted string.

Output

Run the ember server; you will receive the following output −