Handlebars.js!

This presentation from The Ruby Hoedown 2011 covers the basics of Handlebars.js, including a ton of code samples.

Transcript

2. commondream @
3. commondream http:// .net
4. commondream http://github.com/
6. A Brief History of Handlebars.js
8. http://mustache.github.com
9. Logic-less Templates Well, not really logic-less, but more like implicit logic.
10. <h1>{{header}}</h1> {{#items}} {{#first}} <li><strong>{{name}}</strong></li> {{/first}} {{#link}} <li><a href="{{url}}">{{name}}</a></li> {{/link}} {{/items}} Data { header: “Best Songs Evarrr!!!”, items: [{name: “You’ve lost that loving feeling”, url: “http://rdio.com/yltlf”}]} Template
13. No Backtracking
14. <h1>{{header}}</h1> {{#items}} {{#first}} <li><strong>{{name}}</strong></li> {{/first}} {{#link}} <li><a href="{{url}}">{{name}}</a></li> {{/link}} {{/items}} Data { header: “Best Songs Evarrr!!!”, items: [{name: “You’ve lost that loving feeling”, url: “http://rdio.com/yltlf”}]} Template
15. No Globals
16. One Magical Tweet...
17. One Magical Tweet... Yo, yo... anyone want to work on an improving mustache.js with me? Let’s roll...
18. Using Handlebars.js!
19. http://githubquiz.heroku.com/
20. http://githubquiz.heroku.com/live
21. https://github.com/commondream/github_quiz
22. Using Templates
23. var template = Handlebars.compile(“{{someTemplate}}”); template({some: data});
24. <script id="live-template" type="text/x-handlebars-template"> ...your template here... </script> Template JavaScript var template = Handlebars.compile($(‘#live-template’).html()); $(‘#spot-to-put-stuff’).html(template({some: data}));
25. All About Context
26. { : [ { : “Handlebars.js”, : “Awesome JavaScript Templating” }, { title: “Rails”, description: “Ruby on Rails” } ] } projects title description
27. projects title description
28. <% projects.each do |project| %> <%= project.title %> <%= project.description %> <% end %>
29. {{#projects}} {{title}} {{description}} {{/projects}}
30. The Handlebars.js Language
31. Superset of Mustache
32. Comments {{! This is a comment}}
33. {{! Shuffle the answers}} {{#shuffle answers}} {{#this}} {{> answer}} {{/this}} {{/shuffle}}
34. Expressions {{expression}}
35. <p id="question-question"> Who maintains the <span class="question-project-name">{{title}}</span> project? </p> <p> Here's a hint. The project's description is:<br /> <em id="question-project-description">{{description}}</em> </p> Data { title: “Handlebars.js”, description: “Awesome JavaScript Templating” } Template
36. if value is truthy output value.toString() else don’t output anything
37. Blocks Conditional, Iteration, Scope
38. {{#url}} <p> We won’t ever get here, because url is falsy - it’s undefined </p> {{/url}} Data { title: “Handlebars.js”, description: “Awesome JavaScript Templating” } Template
39. <ul> {{#names}} <li>{{this}}</li> {{/names}} </ul> Data { names: [“Alan”, “Tommy”, “Yehuda”, “Jeremy”] } Template
40. {{#question}} <p id="question-question"> Who maintains the <span class="question-project-name">{{title}}</span> project? </p> <p> Here's a hint. The project's description is:<br /> <em id="question-project-description">{{description}}</em> </p> {{/question}} Data { question: { title: “Handlebars.js”, description: “Awesome JavaScript Templating” } } Template
41. Inverted Blocks {{^ inverted}}
42. {{^url}} <p> We’ll get here, since we’re in an inverted block </p> {{/url}} Data { title: “Handlebars.js”, description: “Hooray JavaScript Templating” } Template
43. Partials {{> partial}}
44. Handlebars.registerPartial(“answer”, ‘<div class=”answer”>...answer content goes here...</div>’); {{#answers}} {{> answer}} {{/answers}} Partial Template
45. Syntactic Sugar
46. Path Goodies Dots {{question.title} Backtracking {{../title}} this {{this}}
47. Blocks with Else {{#foo}}{{else}}{{/foo}}
48. {{#url}} <p> We won’t ever get here, because url is falsy - it’s undefined </p> {{else}} <p> We will get here, though. </p> {{/url}} Data { title: “Handlebars.js”, description: “Awesome JavaScript Templating” } Template
49. {{#url}} <p> We won’t ever get here, because url is falsy - it’s undefined </p> {{/url}} {{^ url}} <p> We will get here, though. </p> {{/url}} Data { title: “Handlebars.js”, description: “Awesome JavaScript Templating” } Template
50. Helpers! {{helper}} and {{#helper}}
51. Handlebars.registerHelper(“myHelper”, function(arg1, arg2, options) { var inside = options.fn(arg1, arg2); var elseStuff = options.inverse(stuff); return “<div>” + inside + “</div>”; });
52. Handlebars.registerHelper(“myHelper”, function(arg1, arg2, options) { var inside = options.fn(arg1, arg2); return “<div>” + inside + “</div>”; });
53. Handlebars.registerHelper(“myHelper”, function(arg1, arg2, options) { var inside = options.fn(arg1, arg2); var elseStuff = options.inverse(stuff); return “<div>” + inside + “</div>”; });
54. Handlebars.registerHelper(“myHelper”, function(arg1, arg2, options) { var inside = options.fn(arg1, arg2); var elseStuff = options.inverse(stuff); return “<div>” + inside + “</div>”; });
55. Handlebars.registerHelper(“image”, function(url) { return ‘<img src=”url” />’; }); {{image “http://githubquiz.commondream.net/logo.png”}} Helper Template
56. Handlebars.registerHelper("shuffle", function(array, options) { var newArray = []; if (Math.random() > 0.5) { newArray = [array[0], array[1]]; } else { newArray = [array[1], array[0]]; } return options.fn(newArray); }); Helper Template {{#shuffle answers}} {{#this}} ... output the answer here... {{/this}} {{/shuffle}}
57. function ifHelper(context, options) { if(!context || Handlebars.Utils.isEmpty(context)) { return options.inverse(this); } else { return options.fn(this); } }); Handlebars.registerHelper('if', ifHelper);
58. Built-In Helpers If, Unless, Each, With
59. Everything’s a helper!
60. Handlebars.registerHelper('blockHelperMissing', function(context, options) { var inverse = options.inverse || function() {}, fn = options.fn; var ret = ""; var type = Object.prototype.toString.call(context); if(type === "[object Function]") { context = context(); } if(context === true) { return fn(this); } else if(context === false || context == null) { return inverse(this); } else if(type === "[object Array]") { if(context.length > 0) { for(var i=0, j=context.length; i<j; i++) { ret = ret + fn(context[i]); } } else { ret = inverse(this); } return ret; } else { return fn(context); } });
61. The Future! http://stuffrandomgeek.blogspot.com/2010/11/laser-cats.html
62. Precompilation
65. More Speed! http://www.flickr.com/photos/sahlgoode/5951308626/
66. Questions? Learn more at http://www.handlebarsjs.com