This document provides an overview of Handlebars.js, a templating library for generating HTML markup from JSON data. It describes how Handlebars allows defining templates using HTML and special tags, then compiles templates into functions that can be passed data to generate HTML. Key features covered include expressions, blocks, conditionals, iterators, helpers for custom logic, and partials. The document provides code examples for common use cases and best practices.

2. Nelvin Driz
ndriz@exist.com

3. Handlebars.js
minimal templating on steroids

5. Who are the others?

6. Why use handlebars.js?
／人◕ ‿‿ ◕ 人＼

7. Web Applications

8. Dynamic Interfaces

9. Cleaner and Simpler

10. Example
#Given a JSON Data
var data = { items: [{text: “Hello World”}, ... ]};
#Normal JS
var div = document.createElement(“div”),
items = data.item;
for(var i = 0; i < data.item.length) {
div.append(items[i].text);
}
#With Handlebars.js
var html = “<div>{{#each items}}{{text}}{{/each}}</div>”;
var template = Handlebars.compile(html);
template.html(data);

11. General Details
Started by Yehuda Katz
Built upon {{ Mustache }} (Logic-less templating)
Compiles templates into a function
No Dependencies

12. Guidelines
Using jQuery v1.6.2
Using Handlebars.js 1.0.0 beta3
Templates are surrounded by:
<script type=”text/x-handlebars-template” name=”x” id=”x”></script>

13. Quick Example
#Template
{{#person}}
{{../birthday/month}}
{{/person}}
#Data
var data = {
person : { name : "name" }
, birthday: { month: "month" }
};
#Output
month

14. Javascript Flow
/* Data */
var data = {
person : { name : "name" }
, birthday: { month: "month" }
};
/* Get Template */
var html = $(“#selector”).html();
/* Compile */
var template = Handlebars.compile(html);
/* Generate HTML using template */
template(data);

15. {{Expression}}

16. {{Expression}}
Template
{{value}} {{fcn}} {{nothing}}
{{escaped}}
{{{notEscaped}}}
Data
var data = {
value: “value”
, fcn : function() { return “function”; }
, escaped : “<div>escaped<div>”
, notEscaped: “<div>not escaped</div>”
};
Output
value function
&lt;div&gt;escaped&lt;/div&gt;
<div>not escaped</div>

17. {{Expression}}
Simplest Dynamic Content
Handlebar curly brace ( { / } )
Contains (Value/Function/Nothing)
Escapes Results by Default
Use {{{Expression}}} to Unescape
3 Pairs of Handlebars

18. Handlebars.Path/Nesting

19. Handlebars.Path/Nesting
#Template
{{#person}}
{{../birthday/month}}
{{/person}}
{{person.firstName}} {{person/middleInit}}
#Data
var data = {
person : { firstName : “name”
, middleInit: “m” }
, birthday: { month: "month" }
};
#Output
month
name m

20. Handlebars.Path/Nesting
{{this}} in a template means current context
dot ( . ) operator to inner context
deprecated forward-slash ( / )
dot dot ( .. ) operator to parent context
Chain-able

21. {{#Block}}{{/Block}}

22. {{#Block}}{{/Block}}
start: Prepended by hash ( # )
end: {{/Expression}} prepended by forward slash ( / )
Change the context on the result of the {{#Expression}}

23. {{#if block}}{{/if}}
#Template
{{#if truthy}} truthy {{else}} falsy {{/if}}
{{#if falsy }} falsy {{else}} truthy{{/if}}
#Data
var data = {
truthy: true
, falsy : false
};
#Output
truthy truthy

24. {{#unless block}}{{/unless}}
#Template
{{#unless truthy}} truthy {{else}} falsy {{/unless}}
{{#unless falsy }} falsy {{else}} truthy{{/unless}}
{{^falsy}} false {{/falsy}}
{{^zero }} truth {{/falsy}}
#Data
var data = {
truthy: true
, falsy : false
, zero : 0
};
#Output
falsy falsy false

25. {{#each block}}{{/each}}
#Template
{{#each ul1}} {{this}} {{/each}}
{{#each ul2}} {{li}} {{/each}}
{{#each ul2}} {{this.li}} {{/each}}
#Data
var data = {
ul1: [“li1”, “li2”]
, ul2: [{li: “li1”}, {li: “li2”}]
};
#Output
li1 li2
li1 li2
li1 li2

26. {{#with block}}{{/with}}
#Template
{{#with person}} {{firstName}} {{birthday}} {{/with}}
#Data
var data = {
person: {
firstName: “name”
, birthday: “date”
}
};
#Output
name date

27. Global Block Helpers
Special Parameters ( . / .. / this )
Built in block helpers:
{{#each}} , {{#if}} , {{#unless}} , {{#with}}
Special Expressions:
{{else}} Used for {{#if}} and {{#unless}}
{{^expression}} just like {{#unless}} but not on zero

28. Custom Expression Helpers

29. Custom Expression Helpers
#Helper
Handlebars.registerHelper(“greet”, function(fN, lN) {
return “Hello, “ + fN + “ ” + lN “!”;
});
#Template
{{greet “firstName” “lastName”}}
#Output
Hello, firstName lastName!

30. Custom Expression Helpers
Use Handlebars.registerHelper(“helperName”, fcn);
function(parameters, ... , block) {};
Call like an {{Expression}}

31. Custom Block Helpers

32. Custom Block Helpers
#Helper
Handlebars.registerHelper(“modulo”, function(n, block) {
if((n % 2) == 0) {
return block();
} else {
return block.inverse();
}
});
#Template
{{#modulo 10}} even {{else}} odd {{/modulo}}
{{#modulo 3 }} even {{else}} odd {{/modulo}}
#Output
even odd

33. Custom Block Helpers
Use Handlebars.registerHelper(“helperName”, fcn);
function(parameters, ... , trueBlock, falseBlock) {};
function(parameters, ... , block) {};
trueBlock ~ block | falseBlock ~ block.inverse
Call like a {{#Block}}

34. Hash=Arguments (Helpers)

35. Hash=Arguments (Helpers)
#Helper
Handlebars.registerHelper(“gate”, function(block) {
if(block.hash[“key”] == “open”)
return block();
});
Handlebars.registerHelper(“gate2”, function(block) {
return block.hash[“key”];
});
#Template
{{#gate key=”open”}}open{{/gate}}
{{gate key=”open”}}
#Output
open
open

36. Hash=Arguments (Helpers)
key=value pairs
Accessible through block.hash object

37. Partials
Use Handlebars.registerPartial(“partialName”, tmpl);
The partial may be a String or a Compiled Template
Use {{> partialName}} inside template

38. Extra : Debugger
Handlebars.registerHelper(“debug”, function(optValue) {
console.log(“Context”);
console.log(“=========”);
console.log(this);
if(optionalValue) {
console.log(“Value”);
console.log(“=========”);
console.log(optValue);
}
});

39. Extra: Listener
#Helper
Handlebars.registerHelper(“listener”, function(block) {
$(“#selector”).html(block(this));
return “”;
});
#Template
{{#listener}}listened {{value}}{{/listener}}

40. Resources
http://www.handlebarsjs.com/
http://yehudakatz.com/2010/09/09/announcing-
handlebars-js/
http://thinkvitamin.com/code/getting-started-with-
handlebars-js/

41. Questions?