With the recent release of Ember.js version 1.13 comes support for a new API for declaring helpers.
One approach creates a helper class via Ember.Helper’s .extend,
while the other declares the helper with a shorthand API
via the Ember.Helper.helper function.
At the core of both approaches is the compute function.
This function accepts an array of parameters, as well as a hash of options, populated when invoked in a Handlebars template:
{{address "1600 Pennsylvania Ave" "Washington, DC" "20500" separator="<br>"}}
The corresponding JavaScript would look like this:
import Ember from 'ember';
export default Ember.Helper.helper(
function compute(params, hash) {
const street = params[0];
const cityAndState = params[1];
const zipCode = params[2];
const separator = hash.separator;
// ... do the work
}
);
Using ES2015 destructuring, the variable declarations can be moved to
the function‘s parameter list:
import Ember from 'ember';
export default Ember.Helper.helper(
function compute([street, cityAndState, zipCode], { separator }) {
// ... do the work
});
While this works great for Ember.Helper, there is nothing stopping you from
using this anywhere your functions accept arrays of arguments or hashes of
options:
function calculateArea({ width, height }) {
return width * height;
}
// call it with a hash
const rectangle = { width: 5, height: 4 };
calculateArea(rectangle); // => 20
