## JavaScript Templates - Example

We'll focus on using the Handlebars template library. Other template systems will do similar things though, with different syntax.

With Handlebars, the key parts are:

- Write a "Handlebars" template
- Load the "Handlebars" JavaScript library
- Compile the template using Handlebars
- Evaluate the template, passing in the data
- Add the result of the processed template to the page

Handlebars syntax are based on double curly braces, like `{{ handlebar expression }}`.

So to iterate through the `seasons` array, our Handlebars template would look like:

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

To re-implement our "seasons list" example using Handlebars, we could something like:

- The Handlebars template is defined in Lines 49 — 55.
  This template iterates through the `seasons` array
  - `{{#seasons}}` starts the iteration
  - `{{/seasons}}` ends the iteration
  - Within the loop, `{{.}}` refers to item of the array
- The Handlebars template is process in `buildSeasonsContent`
  - Load the library (line 6)
  - Get the template as text (line 32)
  - Compile the template (line 34)
  - Process the template with the data (line 36)
  - Add result to page (line 39)

See the working examples:

- Handlebars - Seasons - Live example