(function () {

// ... vars and functions defined here are

// local to this module

// here you can also access global variables

}());

•

•

•

•

<div class=“userEntry">

<h1>

{{username}}

</h1>

<img>

{{profilePic}}

</img>

<div class=“status“>

{{status}}

</div>

</div>

<div class=“userEntry">

<h1>{{username}}</h1>

<div class=“status“>

{{{status}}}

</div>

</div>

var context = {

username: “Ivano“,

profilePic: “./images/pic.png“,

status: “feeling good”

};

<script id=“user-template"

type="text/x-handlebars-template">

// template content

</script>

var source = $("#user-template").html();

var template = Handlebars.compile(source);

var context = {username: “Ivano“,

status: “feeling good” };

var html = template(context);

<div class=“userEntry">

<h1>Ivano<h1>

<div class=“status“>

feeling good

</div>

</div>

<h1>{{username}}</h1>

<h1>{{user.username}}</h1>

Handlebars.registerHelper(‘test‘, function(user) {

return new Handlebars.SafeString(

"<a href='" + user.name + "'>" +

user.surname + "</a>"

);

});

{{ test user }}

<div class="entry“>

<h1>{{title}}</h1>

{{#with author}}

<h2>By {{firstName}} {{lastName}}</h2>

{{/with}}

</div>

{ title: "My first post!",

author: { firstName: "Charles", lastName: "Jolley" }

}

<div class="entry“>

<h1>My first post!</h1>

<h2>By Charles Jolley</h2>

</div>

<ul class="people_list">

{{#each people}}

<li>{{this}}</li>

{{/each}}

</ul>

{ people: [ "Yehuda Katz", "Alan Johnson", "Charles Jolley" ] }

<ul class="people_list">

<li>Yehuda Katz</li>

<li>Alan Johnson</li>

<li>Charles Jolley</li>

</ul>

<div class="entry">

{{#if author}}

<h1>{{firstName}} {{lastName}}</h1>

{{else}}

<h1>Unknown Author</h1>

{{/if}}

</div>

•

•

•