/ Helpers

Mastering Ember.js helpers: Arguments

When passing arguments to any helper in your Ember.js templates you can specify parameters in two ways.

As a list of parameters,

{{if ready 'green' 'red'}}
{{regal-portrait 'Elizabeth II'}}

as a hash of key-value pairs

{{regal-portrait veryFancy=true type='fresco'}}

or both.

{{regal-portrait 'Richard III' width='4 feet' height='15 feet'}}

The blueprint when you run ember generate helper in ember-cli sets you up for both cases.

ember g helper regal-portrait

// app/helpers/regal-portrait.js
import Ember from 'ember';

export function regalPortrait(params/*, hash*/) {
  return params;

export default Ember.Helper.helper(regalPortrait);

N.B. hash is commented out in case you don't want to use it.

In our last example this helper would be called with an array and a hash:

regalPortrait(params, hash)
// params = ['Richard III']
// hash = { width: '4 feet', height: '15 feet' }

To be extremely fancy you can define the helper using ES6 destructured assignment:

export function regalPortrait([person], {width, height}) {
  return `A portrait of ${person} which is ${width} wide and ${height} high`;

Now go forth and impress all your plebeian co-workers.

Mastering Ember.js helpers: Arguments
Share this