Simplifying templates with helpers in Handlebars

While writing templates we often have the task of displaying common visual elements, such as alerts, dialogs, and lists. These elements may have a complex internal structure, and writing a template every time to map the model to this structure can be an error-prone and repetitive process.

Handlebars allows us to simplify the writing of templates containing common elements by replacing the template for the common element with a call to helpers.

In this recipe, we're going to write Handlebars helpers to render links, images, and unordered lists. We're going to display a list of people with their name, photo, and link to their profile.

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 and copy handlebars.js to this directory, or download directly (on Linux):

wget https://raw.github.com/wycats/handlebars.js/master/dist/handlebars...