Rendering arrays using Handlebars

Displaying a list of objects is the most common reason we need a separate template language, otherwise we could easily get by with direct DOM manipulation. Handlebars has an easy, clean, and straightforward syntax for array iteration—the each construct, which works very similarly to the for each loops in other languages.

In this recipe, we're going to render a list of message objects. Each message object will have an author, arrival time, body, and read status. We're going to use a different style to distinguish between read and unread messages.

As usual in this chapter, the template will be included in the HTML file inside a script tag. However, the compilation can be called on any string that we choose; it is therefore possible to download the template data by sending a request to the server.

Getting ready

We need to download Handlebars from https://github.com/wycats/handlebars.js. The browser version is in the dist directory. Create a directory for the example...