Nelvin Drizndriz@exist.com
Handlebars.jsminimal templating on steroids
Who are the others?
Why use handlebars.js?/人◕ ‿‿ ◕ 人\
Web Applications
Dynamic Interfaces
Cleaner and Simpler
Example#Given a JSON Datavar data = { items: [{text: “Hello World”}, ... ]};#Normal JSvar div   = document.createElement(“...
General Details Started by Yehuda Katz Built upon {{ Mustache }} (Logic-less templating) Compiles templates into a functio...
GuidelinesUsing jQuery v1.6.2Using Handlebars.js 1.0.0 beta3Templates are surrounded by:  <script type=”text/x-handlebars-...
Quick Example#Template{{#person}}  {{../birthday/month}}{{/person}}#Datavar data = {   person : { name : "name" }, birthda...
Javascript Flow/* Data */var data = {   person : { name : "name" }, birthday: { month: "month" }};/* Get Template */var ht...
{{Expression}}
{{Expression}}Template{{value}} {{fcn}} {{nothing}}{{escaped}}{{{notEscaped}}}Datavar data = {   value: “value”, fcn : fun...
{{Expression}} Simplest Dynamic Content Handlebar curly brace ( { / } ) Contains (Value/Function/Nothing) Escapes Results ...
Handlebars.Path/Nesting
Handlebars.Path/Nesting#Template{{#person}}  {{../birthday/month}}{{/person}}{{person.firstName}} {{person/middleInit}}#Da...
Handlebars.Path/Nesting{{this}} in a template means current contextdot ( . ) operator to inner contextdeprecated forward-s...
{{#Block}}{{/Block}}
{{#Block}}{{/Block}} start: Prepended by hash ( # ) end: {{/Expression}} prepended by forward slash ( / ) Change the conte...
{{#if block}}{{/if}}#Template{{#if truthy}} truthy {{else}} falsy {{/if}}{{#if falsy }} falsy {{else}} truthy{{/if}}#Datav...
{{#unless block}}{{/unless}}#Template{{#unless truthy}} truthy {{else}} falsy {{/unless}}{{#unless falsy }} falsy {{else}}...
{{#each block}}{{/each}}#Template{{#each ul1}} {{this}}    {{/each}}{{#each ul2}} {{li}}      {{/each}}{{#each ul2}} {{thi...
{{#with block}}{{/with}}#Template{{#with person}} {{firstName}} {{birthday}} {{/with}}#Datavar data = {   person: {     fi...
Global Block HelpersSpecial Parameters ( . / .. / this )Built in block helpers:  {{#each}} , {{#if}} , {{#unless}} , {{#wi...
Custom Expression Helpers
Custom Expression Helpers#HelperHandlebars.registerHelper(“greet”, function(fN, lN) {  return “Hello, “ + fN + “ ” + lN “!...
Custom Expression HelpersUse Handlebars.registerHelper(“helperName”, fcn);function(parameters, ... , block) {};Call like a...
Custom Block Helpers
Custom Block Helpers#HelperHandlebars.registerHelper(“modulo”, function(n, block) {  if((n % 2) == 0) {    return block();...
Custom Block HelpersUse Handlebars.registerHelper(“helperName”, fcn);function(parameters, ... , trueBlock, falseBlock) {};...
Hash=Arguments (Helpers)
Hash=Arguments (Helpers)#HelperHandlebars.registerHelper(“gate”, function(block) {  if(block.hash[“key”] == “open”)    ret...
Hash=Arguments (Helpers)key=value pairsAccessible through block.hash object
Partials Use Handlebars.registerPartial(“partialName”, tmpl); The partial may be a String or a Compiled Template Use {{> p...
Extra : DebuggerHandlebars.registerHelper(“debug”, function(optValue) {  console.log(“Context”);  console.log(“=========”)...
Extra: Listener#HelperHandlebars.registerHelper(“listener”, function(block) {  $(“#selector”).html(block(this));  return “...
Resourceshttp://www.handlebarsjs.com/http://yehudakatz.com/2010/09/09/announcing-handlebars-js/http://thinkvitamin.com/cod...
Questions?
Handlebars
Handlebars
Upcoming SlideShare
Loading in …5
×

Handlebars

3,875 views

Published on

Published in: Technology, Business
  • Be the first to comment

Handlebars

  1. 1. Nelvin Drizndriz@exist.com
  2. 2. Handlebars.jsminimal templating on steroids
  3. 3. Who are the others?
  4. 4. Why use handlebars.js?/人◕ ‿‿ ◕ 人\
  5. 5. Web Applications
  6. 6. Dynamic Interfaces
  7. 7. Cleaner and Simpler
  8. 8. Example#Given a JSON Datavar data = { items: [{text: “Hello World”}, ... ]};#Normal JSvar div = document.createElement(“div”), items = data.item;for(var i = 0; i < data.item.length) { div.append(items[i].text);}#With Handlebars.jsvar html = “<div>{{#each items}}{{text}}{{/each}}</div>”;var template = Handlebars.compile(html);template.html(data);
  9. 9. General Details Started by Yehuda Katz Built upon {{ Mustache }} (Logic-less templating) Compiles templates into a function No Dependencies
  10. 10. GuidelinesUsing jQuery v1.6.2Using Handlebars.js 1.0.0 beta3Templates are surrounded by: <script type=”text/x-handlebars-template” name=”x” id=”x”></script>
  11. 11. Quick Example#Template{{#person}} {{../birthday/month}}{{/person}}#Datavar data = { person : { name : "name" }, birthday: { month: "month" }};#Outputmonth
  12. 12. 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);
  13. 13. {{Expression}}
  14. 14. {{Expression}}Template{{value}} {{fcn}} {{nothing}}{{escaped}}{{{notEscaped}}}Datavar data = { value: “value”, fcn : function() { return “function”; }, escaped : “<div>escaped<div>”, notEscaped: “<div>not escaped</div>”};Outputvalue function  &lt;div&gt;escaped&lt;/div&gt;<div>not escaped</div>
  15. 15. {{Expression}} Simplest Dynamic Content Handlebar curly brace ( { / } ) Contains (Value/Function/Nothing) Escapes Results by Default Use {{{Expression}}} to Unescape 3 Pairs of Handlebars
  16. 16. Handlebars.Path/Nesting
  17. 17. Handlebars.Path/Nesting#Template{{#person}} {{../birthday/month}}{{/person}}{{person.firstName}} {{person/middleInit}}#Datavar data = { person : { firstName : “name” , middleInit: “m” }, birthday: { month: "month" }};#Outputmonthname m
  18. 18. Handlebars.Path/Nesting{{this}} in a template means current contextdot ( . ) operator to inner contextdeprecated forward-slash ( / )dot dot ( .. ) operator to parent contextChain-able
  19. 19. {{#Block}}{{/Block}}
  20. 20. {{#Block}}{{/Block}} start: Prepended by hash ( # ) end: {{/Expression}} prepended by forward slash ( / ) Change the context on the result of the {{#Expression}}
  21. 21. {{#if block}}{{/if}}#Template{{#if truthy}} truthy {{else}} falsy {{/if}}{{#if falsy }} falsy {{else}} truthy{{/if}}#Datavar data = { truthy: true, falsy : false};#Outputtruthy truthy
  22. 22. {{#unless block}}{{/unless}}#Template{{#unless truthy}} truthy {{else}} falsy {{/unless}}{{#unless falsy }} falsy {{else}} truthy{{/unless}}{{^falsy}} false {{/falsy}}{{^zero }} truth {{/falsy}}#Datavar data = { truthy: true, falsy : false, zero : 0};#Outputfalsy falsy false
  23. 23. {{#each block}}{{/each}}#Template{{#each ul1}} {{this}} {{/each}}{{#each ul2}} {{li}} {{/each}}{{#each ul2}} {{this.li}} {{/each}}#Datavar data = { ul1: [“li1”, “li2”], ul2: [{li: “li1”}, {li: “li2”}]};#Outputli1 li2li1 li2li1 li2
  24. 24. {{#with block}}{{/with}}#Template{{#with person}} {{firstName}} {{birthday}} {{/with}}#Datavar data = { person: { firstName: “name” , birthday: “date” }};#Outputname date
  25. 25. Global Block HelpersSpecial 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
  26. 26. Custom Expression Helpers
  27. 27. Custom Expression Helpers#HelperHandlebars.registerHelper(“greet”, function(fN, lN) { return “Hello, “ + fN + “ ” + lN “!”;});#Template{{greet “firstName” “lastName”}}#OutputHello, firstName lastName!
  28. 28. Custom Expression HelpersUse Handlebars.registerHelper(“helperName”, fcn);function(parameters, ... , block) {};Call like an {{Expression}}
  29. 29. Custom Block Helpers
  30. 30. Custom Block Helpers#HelperHandlebars.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}}#Outputeven odd
  31. 31. Custom Block HelpersUse Handlebars.registerHelper(“helperName”, fcn);function(parameters, ... , trueBlock, falseBlock) {};function(parameters, ... , block) {}; trueBlock ~ block | falseBlock ~ block.inverseCall like a {{#Block}}
  32. 32. Hash=Arguments (Helpers)
  33. 33. Hash=Arguments (Helpers)#HelperHandlebars.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”}}#Outputopenopen
  34. 34. Hash=Arguments (Helpers)key=value pairsAccessible through block.hash object
  35. 35. Partials Use Handlebars.registerPartial(“partialName”, tmpl); The partial may be a String or a Compiled Template Use {{> partialName}} inside template
  36. 36. Extra : DebuggerHandlebars.registerHelper(“debug”, function(optValue) { console.log(“Context”); console.log(“=========”); console.log(this); if(optionalValue) { console.log(“Value”); console.log(“=========”); console.log(optValue); }});
  37. 37. Extra: Listener#HelperHandlebars.registerHelper(“listener”, function(block) { $(“#selector”).html(block(this)); return “”;});#Template{{#listener}}listened {{value}}{{/listener}}
  38. 38. Resourceshttp://www.handlebarsjs.com/http://yehudakatz.com/2010/09/09/announcing-handlebars-js/http://thinkvitamin.com/code/getting-started-with-handlebars-js/
  39. 39. Questions?

×