1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Use template variables in a GlimmerJS component

    emberEmber.js

    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>