Handlebars JS Example 1

HTML

<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script>
<div id="content"></div>
<script id="tmpl-hello" type="text/x-handlebars-template">
    <p>Hello, I'm {{name}}. I have {{toys.length}} toys:</p>
    <ul>{{#toys}}<li>{{model}} by {{make}}</li>{{/toys}}</ul>
</script>

CSS

li {
    color:#F00
}

JavaScript

// data in JSON format, possibly fetched over AJAX
var json = {
    "name": "Adon",
    "toys": [
        {"model": "iPhone", "make": "Apple"},
        {"model": "Xperia", "make": "Sony"}
    ]
};

// compile the template on-the-fly
var tmpl = Handlebars.compile(document.getElementById('tmpl-hello').innerHTML);

// bind the data with template, put result back
document.getElementById('content').innerHTML = tmpl(json);