List Rendering

We’ll cover how to render a list of songs in our Ember application in this lesson.

Rendering the list of songs reactively

In the songs template, songs.hbs, we render each song in @model. However, @model is set only once when we enter the corresponding route. When we add the new song to the band, band.songs changes, but {{#each @model as |song|}} is not re-run because @model, itself, didn’t change. One way to fix this would be to reset @model to the new value, but as the @ prefix indicates, it’s an immutable reference from what was returned from the model hook of the route.

A cleaner solution is to iterate over an expression that updates whenever we change the songs of the band. Since we also need to get hold of the band that corresponds to the songs we created, it’s easiest to change the route so that it returns the band object and loop through @model.songs in the template:

Get hands-on with 1200+ tech skills courses.