Previous Lecture Complete and continue  

  Section Review

The code shown here is simplified by removing the code surrounding isReverse. The review sections will sometimes simplify like this to more clearly show the concepts.


Getters are properties that you can define like functions in your javascript, but reference like variables in your javascript and handlebars.

In this section, `sortedBooks` is defined via a getter: `get sortedBooks(){ /*...*/ }`. It's referenced in the template, within the each loop, as `this.sortedBooks`.

User Actions

We can react to user clicks and other interactions through the use of actions.

An action must be defined in the Javascript. It's a function that has the `@action` decorator applied. A decorator can be applied right above or right before the function name.

An action's trigger must be defined in the template. We use the action helper for that: `{{action this.actionName arguments}}`. The action name can be specified as a string or as a direct reference to the action.

When the user interacts with the DOM element as specified in the template, it triggers the action function.

Tracked Properties

Add the `@tracked` decorator to a class property and then any getters which rely on that property will be automatically updated when the property is changed.

In our example, our action changes the `sortProperty`, and then our `sortedBooks` getter says how to compute the sorted books order from that. With `sortProperty` as a tracked property, the `sortedBooks` getter will automatically recompute when it needs to.

Array Methods

`.sortBy` is an array method added by ember that sorts by the property given.

`.reverse` is an array method from javascript that reverses the order of the array.

Used together: `this.books.sortBy('title').reverse()`.