List Rendering
We’ll cover how to render a list of songs in our Ember application in this lesson.
We'll cover the following
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.