Better with Templates!

Using JavaScript templates, building a list could look something like:

There are a variety of libraries for making templates in JavaScript.  I'll mention four here, and we'll focus on one in our examples (Handlebars):

• Trimpath JavaScript Templates (JST)
• Mustache, "Logic-less" templates
• Handlebars, Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.

KISS - Keep It Simple.
Before we get started with an example, I want to put a strong recommendation to follow the keep your templates simple principle.  Trimpath JST and Mustache forces you to do this -- with Handlebars, you can keep your templates simple, but you can make them complex. Remember that the prime benefit we want to achieve with templates is for our presentation format to be defined separately from our JavaScript code. The more complex our templates get, the further we get from achieving that benefit.