Helpers

Ember provides a variety of ways to create re-usable code and the simplest of these are the so-called helpers. A helper is basically a short block of code that takes one or more parameters and transforms those into one or more new values.

To demonstrate this we will create a simple helper that formats the semester data into something more human-readable. To create a new helper run the following command:

$ yarn ember generate helper format-semester

Helper names can be both a single word, or multiple words connected via dashes, as in this example. The skeleton helper (app/helpers/format-semester.js) looks like this

import { helper } from '@ember/component/helper';

export default helper (function formatSemester(positional/*, named*/) {
  return positional;
})

and basically simply returns the parameters you pass into it. We can now use it in the app/components/view-module.hbs to format the semester, by changing

<dt>Semester</dt>
<dd>{{@module.semester}}</dd>

to

<dt>Semester</dt>
<dd>{{format-semester @module.semester}}</dd>

You will see that this has no visible effect, as we have not yet implemented the helper’s actual functionality. In the helper code, the params parameter is always a list of all parameters passed to the helper in the template. We could simply process the first element of the params, but what we will do instead is use the map() function to transform each element in the list:

import { helper } from '@ember/component/helper';

/**
 * Format the semester values for human reading.
 *
 * @param {array} positional The semester values to format
 **/

export default helper(function formatSemester(positional) {
    return positional.map((semester => {
        return semester
    });
})

export default helper(formatSemester);

The way map() works is that the function that is passed as the parameter is called for each element in the list params. The return value of that function is then used to build a new list with the transformed values. Here, we simply return the value of the semester as is, which as a result basically creates a copy of the list and returns that as the result of the processing.

To do something more interesting we need to check which semester it is and reformat accordingly. In the data, the two semesters are coded as “WSXX/YY” or “SSXX”. We can use that to determine whether it is the summer semester or winter semester, and then dynamically add the specific year:

import { helper } from '@ember/component/helper';

/**
 * Format the semester values for human reading.
 *
 * @param {array} positional The semester values to format
 **/

export default helper(function formatSemester(positional) {
    return positional.map((semester => {
        if(semester.indexOf('WS') === 0) {
            return `Wintersemester 20${semester.substring(2)}`;
        } else {
            return `Summersemester 20${semester.substring(2)}`;
        }
    }));
});

If you now try it out with the different modules in the database, you can see that it nicely re-formats the semester labels. Importantly, helpers can only be used to reformat values, you cannot generate HTML code. For that you will need components, which we will look at in the next step.