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

2,866

Published on

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,866
On Slideshare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
47
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • What if huge chunks of the document needs to change due to some event\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n\n
  • \n
  • \n
  • \n
  • \n
  • * If a block&amp;#x2019;s expression evaluates to anything other than an Array, Handlebars simply sets the context to the result of evaluating the expression.\n\n
  • \n
  • \n
  • \n
  • \n
  • Special Parameters: (dot) (dot dot) this\n\neach - iterate through array\nif - truthy (any value except undefined, null, 0, false)\nunless - falsy (only values with undefined, null, 0, false)\n\ntip #arrays use array.length\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Basically Whenever the template here is used, the html of the element with id #selector is updated\n
  • \n
  • \n
  • 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?
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×