Using {{this}} also gives you access to the properties of the element being iterated over.
For instance, if you’re using the following array inside the context object:
And your template looks like:
After going through the steps of compiling, the finished HTML will look like:
This exercise will provide additional practice using the {{each}} block and accessing properties using {{this}}.
Instructions
In index.html, in the <script> element with an id of languagesTemp, add an {{each}} helper block. Use {{#each}} to start the block and {{/each}} to end the block. Then in the starting expression, add an argument of languages.
Inside the {{each}} block, add a <div> element with a class attribute of "card". Inside the <div> element, add a <p> element with the text: I should learn {{this.name}}..
After compiling, for each iteration of elements, {{this.name}} will be replaced with a value.
Navigate to main.js. In the context object, add a languages property and set its value to an empty array.
Populate the languages array with 3 objects. Each object will have a name property. The values for the name are: 'HTML', 'CSS', 'JavaScript'.