HIDE PLAYLIST

Use template variables in a GlimmerJS component


In this lesson we will add a variable called content to our component class, initialize it as a string and display the variable in our class using the double curly braces syntax, which is the handlebars expression for expressions, { {content }}.

After this we create a new class variable called items, initialize it as an array with strings. To display this list in our template we add a <ul></ul> and inside this unordered list we use the handlebars each helper to display the list items.

And inside our each statement we will print a <li> tag and render {{ item}} inside it.

<ul>
  {{#each items key="@index" as |item| }}
    <li>{{item}}</li> 
  {{/each}}
</ul>