Plumbing the Depths of Handlebars

**From Node Interactive 2015**

Handlebars is an essential templating tool in every web developer’s toolbelt. It has become the default choice for many frameworks and platforms. Users around the world love how easy it makes dynamic templating on the client and server with JavaScript.

But how much can be really said about the library? With a dead simple API and small set of features, most developers never get to know the library intimately. It’s secrets lay undiscovered but in the open. An open source mystery!

Ryan Lewis has plumbed those depths in the course of researching his Pluralsight course “JavaScript Templating with Handlebars” and he’s boiled down the lessons learned into a convenient 15 item list! Each item showcases some insight or secret that will make developers say “Wow!”

Transcript

1. Plumbing the Depths of Handlebars 2015
2. Ryan Lewis ryanhlewis.com ryanmurakami ! " #
4. www.pluralsight.com/courses/handlebars-javascript-templating
5. 1. Where are Helpers?
6. Handlebars.registerHelper(‘isCorrect’, function() { return false; }); Handlebars.helpers.isCorrect = function() { return false; }
7. Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}} Awesome {{/if}}’); Handlebars.partials[‘awesome-templ’] = function() { //render }}; //some template is rendered with partial
8. 2. Helpers first
9. { name: ‘Ness’, city: ‘Onett’, isCorrect: true } Handlebars.registerHelper(‘isCorrect’, function() { return false; }); {{#if isCorrect}} I’m right! {{/if}} +VņUGORV[
10. You can prefix properties with this to avoid collisions CTG[QWMKFFKPIOG!
11. Postfix all your helpers with “helper”
12. 3. Conditional block syntax
13. {{#if isCorrect}} Dogs are the best! {{/if}} {{#isCorrect}} Dogs are the best! {{/isCorrect}} VJCVņUTKIJV
14. 4. Handlebars implementations
15. Handlebars.Java github.com/jknack/handlebars.java Handlebars.Net github.com/rexm/Handlebars.Net pybars github.com/wbond/pybars3 handlebars.php github.com/XaminProject/handlebars.php
16. 5. node ♥ Handlebars
17. server.views({ engines: { html: require('handlebars') }, path: __dirname + '/templates', partialsPath: __dirname + '/templates/partials' }); hapi.js express.js var app = express(); app.engine('handlebars', require(‘express-handlebars’)({defaultLayout: 'main'})); app.set('view engine', 'handlebars');
18. 6. Handlebars is alive!
19. Feb. 2011 0.9 May 2013 1.0 Sep. 2014 2.0 Feb. 2015 3.0 Sep. 2015 4.0 Handlebars Release Timeline
20. 7. this in helpers
21. Handlebars.registerHelper(‘helpHelper’, function() { return this.needsHelp; }); { needsHelp: ‘shore do!’ } {{helpHelper}} shore do! #V[QWTUGTXKEG
22. 8. this is mutable in helpers
23. Handlebars.registerHelper(‘helpHelper’, function() { this.needsHelp = ‘corse not!’; }); { needsHelp: ‘shore do!’ } {{helpHelper}}{{needsHelp}} corse not!
24. 9. Executing function properties
25. { name: ‘Paula’, getIt: function() { return ‘got it!’; } } {{getIt}} got it!
26. 10. Re-scoping partials
27. {{> myPartial dog=“panda”}} Handlebars.registerPartial(‘myPartial, ‘{{dog}}’); panda
28. 11. @data variables
29. {{@root}} root context {{@first}} true if first iteration {{@index}} zero-based iteration index {{@key}} key name
30. 12. Inline partials in 4.0
31. {{#*inline ‘fullName’}} {{firstName}} {{lastName}} {{/inline}} <h2>Hello {{> fullName}},</h2> <h3>Friends:</h3> <ul> {{#each friends}} <li>{{> fullName}}</li> {{/each}} </ul>
32. 13. Decorate your templates
33. Handlebars.registerDecorator(‘debug’, function(program, props, container, context) { console.log(‘Debug: ‘ + JSON.stringify(context.data)); }); 4GIKUVGT {{* debug}} <h1>{{dog.name}}</h1> <p>{{dog.desc}}</p> VJGPWUG Debug: {"root":{"pet":{"name":"Garfunkel","desc":"Best dog","isDog":true}}} 1WVRWV
34. 14. Control the whitespace
35. {{#blocks~}} {{~/blocks}} {{~properties~}} {{~helpers with=arguments~}} /WEJEQPVTQN {{~*decorators~}} {{~!-- comments --~}}
36. 15. Pre-compilation
37. handlebars: { compile: { options: { namespace: "JST" }, files: { "result.js": "source.hbs" } } } grunt-contrib-handlebars module.exports = function() { var partials = gulp.src(['./templates/_*.hbs']) .pipe(handlebars()) .pipe(wrap('Handlebars.registerPartial(<%= processPartialName(file.relative) %>, Handlebars.template(<%= contents %>));', {}, { imports: { processPartialName: function(fileName) { return JSON.stringify(path.basename(fileName, '.js').substr(1)); } } })); var templates = gulp.src('./templates/[^_]*.hbs') .pipe(handlebars()) .pipe(wrap('Handlebars.template(<%= contents %>)')) .pipe(declare({ namespace: 'App.templates', noRedeclare: true })); return merge(partials, templates) .pipe(concat('templates.js')) .pipe(gulp.dest('./build/js/')); }; gulp-handlebars
38. Ryan Lewis ryanhlewis.com ryanmurakami ! " # 6JCPM[QW +ņXGIQVUVKEMGTU