This Lesson is for PRO Members.

Subscribe today and get access to all lessons! Plus direct HD download
for offline use, member comment forums, and iTunes "podcast" RSS feed.
Level up your skills now!

UNLOCK THIS LESSON

Already subscribed? Sign In

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>