Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Handlebars.js!

 Handlebars.js!

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

commondream

October 08, 2011
Tweet

More Decks by commondream

Other Decks in Programming

Transcript

  1. <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
  2. <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
  3. One Magical Tweet... Yo, yo... anyone want to work on

    an improving mustache.js with me? Let’s roll...
  4. <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}));
  5. { : [ { : “Handlebars.js”, : “Awesome JavaScript Templating”

    }, { title: “Rails”, description: “Ruby on Rails” } ] } projects title description
  6. <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
  7. {{#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
  8. {{#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
  9. {{^url}} <p> We’ll get here, since we’re in an inverted

    block </p> {{/url}} Data { title: “Handlebars.js”, description: “Hooray JavaScript Templating” } Template
  10. {{#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
  11. {{#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
  12. Handlebars.registerHelper(“myHelper”, function(arg1, arg2, options) { var inside = options.fn(arg1, arg2);

    var elseStuff = options.inverse(stuff); return “<div>” + inside + “</div>”; });
  13. Handlebars.registerHelper(“myHelper”, function(arg1, arg2, options) { var inside = options.fn(arg1, arg2);

    var elseStuff = options.inverse(stuff); return “<div>” + inside + “</div>”; });
  14. Handlebars.registerHelper(“myHelper”, function(arg1, arg2, options) { var inside = options.fn(arg1, arg2);

    var elseStuff = options.inverse(stuff); return “<div>” + inside + “</div>”; });
  15. 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}}
  16. function ifHelper(context, options) { if(!context || Handlebars.Utils.isEmpty(context)) { return options.inverse(this);

    } else { return options.fn(this); } }); Handlebars.registerHelper('if', ifHelper);
  17. 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); } });