A common element when developing a website or application using JavaScript is the need to manipulate the document’s HTML, such as displaying a custom notification message, or the results of an AJAX request on the current page.

var list = '<ul>';

for (i = 0; i < items; i++) {
  list += "<li>"+items[i].title+"</li>";
}

list += '</ul>';
$('#page').html(list);

The code example above shows one technique of accomplishing this task, where a string is built up, and then injected into the DOM. This can result in messy and sometimes hard to read code, when the task at hand has a complex HTML structure and/or uses several variables and conditions.

An alternative technique to solve this problem is a project in the name of Handlebars.

Handlebars offers a templating system to help build and use templates for your website or application. By providing Handlebars with an array of data, it will run through a template, injecting the variable data where instructed.

The first step in using Handlebars is to create a template:

<script id="template-book-listings" type="text/x-handlebars-template">
    <ul>
    <li class='title'>{{this.category}}</li>
    {{#each items}}
    	<li>{{this.name}}</li>
    {{/each}}
    </ul>
</script>

The {{each}} and {{//each}} represent the opening and closing of a loop, where items is our data.

From within the loop, item’s can be accessed using {{this}}. A template can then be used anywhere within your scripts using the following code:

var context = {
     category: 'Adventure',
     items: [ 
          { name: 'Moby Dick', url: 'moby-dick.html' },
          { name: 'Robinson Crusoe', url: 'robinson-crusoe.html' }, 
          { name: 'Treasure Island', url: 'treasure-island.html' }
     ]
};

var source = $("#template-book-listings").html(),
       tmpl = Handlebars.compile(source),
       html = tmpl(context);
$('#page').html(html);

I have only created a basic example of Handlebars at work here, for more information visit handlebarsjs.com