Harvard Extension School, Fall 2018
CSCI E-12 Fundamentals of Web Site Development

## 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 Mustache template
- Load the Mustache 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 <code>seasons</code> 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 Mustache template is defined in Lines 32-38.
  This template iterates through the `seasons` array
  - `{{#seasons}}` starts the iteration
  - `{{/seasons}}` ends the iteration
  - Within the loop, `{{.}}` refers to item of the array
  Note that the template is marked as `display: none;` by CSS. There are other ways to include templates, which we'll discuss a bit later.
- Line 11. Load jQuery for Ajax request and DOM manipulations. We're using the jQuery CDN here.
- Line 12. Load Handlebars JS library from the cdnjs.com service.
- Line 15. Here we define the URL we'll get our seasons list from.
- Line 18. Use jQuery to make the Ajax request, and set the callback function to process the data
- Line 20. Get the template source (uses jQuery to select the `#seasonslisttemplate` and get the `html`
- Line 21. Use Handlebars to compile the template. This makes the template ready to process. Under the hood, the compile step turns our {{ handlebars template }} into JavaScript code.
- Line 22. Evaluate the template, passing in the data. The evaluation will return the markup generated.
- Line 23. Add the results of the template evaluation to the page. Note here we are using jQuery.

See the working examples:

- Handlebars - Seasons - Live example
- Handlebars - Seasons - JS Fiddle

Copyright © David Heitmeyer