Speaking to the Outside World

Now, we have a component that shows a song’s rating via stars. It is in splendid isolation, but it lacks the ability to communicate with the outside world. So, let’s round out this chapter by making our component more sociable.

Clicking on one of the stars expresses the user’s intent to update the song’s rating. We’ll need to handle the click and update the song’s rating to the star’s value that was clicked. We don’t need to update the stars’ appearance as the stars getter in the component takes care of that. Because we use this.args.rating inside the function, any time this.args.rating changes, the getter will recompute and the new stars will be rendered in the template. In Ember, getters are auto tracked, so we don’t need to mark it as such.

Installing add-ons

The simplest way to set a value in the template is to use the ember-set-helper add-on, so we’ll need to install it and restart the Ember server process using the following command:

ember install ember-set-helper

Note: In the terminal widget below, you can try the above command.