Demo

HTML

---
chapter: Data
topic: Handlebars Simple
demonstrates: ''
details: ''
---

<!--This script defines the template-->
<!--raw - prevents panini processing, allowing handlebars to take over-->
{{{{raw}}}} 
<script type="text/x-handlebars-template" id="itemTemplate">
    <div class="itemTemplateWrapper">
        <div><span>Item: </span><span>{{item}}</span></div>
        <div><span>Description: </span><span>{{description}}</span></div>
        <div><span>Price: </span><span>{{price}}</span></div>
    </div>
</script>
{{{{/raw}}}}

<!-- This is the container where the compiled template will be printed -->
<div class="row">
    <div class="columns small-12">
        <div class="callout">
            <h5>A Product:</h5>
            <div id="container"></div>
        </div>
    </div>
</div>

Javascript

// ********************************
// Handlebars - Simple
// data-105.html
// ********************************
$(document).ready(function() {
    // only run this script if element exists...
    var elementExists = document.getElementById("itemTemplate");
    if (elementExists) {
        var template = $("#itemTemplate").html();
        // Handlebars compiles the template into a callable function
        var renderer = Handlebars.compile(template);
        // call the compiled function with the template data
        var result = renderer({
            "item": "Whisper 4000 in-home heater and dog walker",
            "description": "Walk your dog and heat your house at the same time? Now you can, with the Whisper 4000 Home Heating system / Dog Treadmill!",
            "price": 895.99,
            "inStock": true,
            "quantity": 100
        });
        $("#container").html(result);
    } // endif
});