Web Development Recipes, 2nd Edition

Recipe 11

Rendering HTML with Handlebars Templates

Problem

Amazing interfaces require lots of dynamic and asynchronous HTML. Thanks to Ajax and JavaScript libraries like jQuery, we can change the user interface without reloading the page by generating HTML with JavaScript. We typically use methods such as string concatenation to add new elements to our interfaces, but these are hard to manage and are prone to error. We have to dance around mixing single and double quotes and often are left to use jQuery’s append method endlessly.

Ingredients

• jQuery

• Handlebars.js^[21]

• QEDServer (for our test server)^[22]

Solution

Thankfully, client-side templating tools such as Handlebars allow us to write real HTML, render data with it, and insert it into the ...