Harvard Extension School
CSCI E-12 Fundamentals of Web Site Development | Fall 2019

## Handlebars - A few more notes

See: JSFiddle Example of Handlebars Loop Techniques

With Handlebars, you can also iterate explicitly with `{{#each }}`

With the context of our "seasons" JSON:

    {
      "seasons": [
        "Spring",
        "Summer",
        "Autumn",
        "Winter"
      ]
    }

We could do:

    <ul>
        {{#each seasons}}
        <li>{{.}}</li>
        {{/each}}
    </ul>

We can also specify the name of the parameter to be used within the loop:

    <ul>
        {{#each seasons as |season|}}
        <li>{{season}}</li>
        {{/each}}
    </ul>

Both of the above would produce:

If needed, you can also pass in the index position as well (remember that the first item in an array is index position = 0, second item is index position = 1, etc.).

    <ul>
        {{#each seasons as |season pos|}}
        <li>{{pos}} {{season}}</li>
        {{/each}}
    </ul>

Which would produce:

Copyright © David Heitmeyer