15 Things I Learned About Handlebars

A list of things I learned while researching my next course for Pluralsight: JavaScript Templating with Handlebars.

Transcript

1. Things I Didn’t Know About Handlebars Ryan Lewis ryanhlewis.com ryanmurakami ! " #
3. pluralsight.com/courses/hapi-building-web-applications
4. JavaScript Templating with Handlebars EQOKPIUQQP
5. 15 Things I Learned About Handlebars
6. 1. Where are Helpers?
7. Handlebars.registerHelper(‘isCorrect’, function() { return false; }); Handlebars.helpers.isCorrect = function() { return false; }
8. 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
9. 2. Helpers first
10. { name: ‘Ness’, city: ‘Onett’, isCorrect: true } Handlebars.registerHelper(‘isCorrect’, function() { return false; }); {{#if isCorrect}} I’m right! {{/if}} GORV[UVTKPI
11. You can prefix properties with this to avoid collisions CTG[QWMKFFKPIOG!
12. Postfix all your helpers with “helper”
13. 3. Conditional block syntax
14. {{#if isCorrect}} Dogs are the best! {{/if}} {{#isCorrect}} Dogs are the best! {{/isCorrect}} VJCVņUTKIJV
15. 4. Handlebars implementations
16. 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
17. 5. hapi ♥ Handlebars, express not so much
18. server.views({ engines: { html: require('handlebars') }, path: __dirname + '/templates', partialsPath: __dirname + '/templates/partials' }); hapi.js express.js No first class support for Handlebars ‘express-handlebars’ works okay
19. 6. Handlebars devs are killing it DWVPQVKPFQEWOGPVCVKQP
20. Feb. 2011 0.9 May 2013 1.0 Sep. 2014 2.0 Feb. 2015 3.0 Sep. 2015 4.0 Handlebars Release Timeline Version 5.0 coming Feb. 2016?
21. Menu? Search? Consistency? 2TGVV[
22. 7. this in helpers
23. Handlebars.registerHelper(‘helpHelper’, function() { return this.needsHelp; }); { needsHelp: ‘shore do!’ } {{helpHelper}} shore do!
24. 8. this is mutable in helpers
25. Handlebars.registerHelper(‘helpHelper’, function() { this.needsHelp = ‘corse not!’; }); { needsHelp: ‘shore do!’ } {{helpHelper}}{{needsHelp}} corse not!
26. 9. Executing function properties
27. { name: ‘Paula’, getIt: function() { return ‘got it!’; } } {{getIt}} got it!
28. 10. Re-scoping partials
29. {{>myPartial word=“bird”}} Handlebars.partial(‘myPartial, ‘{{word}}’); bird
30. 11. @data variables
31. @root root context @first true if first iteration @index zero-based iteration index @key key name
32. 12. Inline partials in 4.0
33. {{#*inline ‘myPartial’}} Doin’ some partial stuff… {{/inline}} {{>myPartial}} Doin’ some partial stuff…
34. 13. ../ ascends contexts
35. { pet: ‘bunny’, deepObj: {…} } {{#deepObj}} {{../pet}} {{/deepObj}} ‘bunny’ ;QWTCPI!
36. 14. Partials or Components?
37. {{> animalPartial type=“dog” animal=dog}} {{animal-comp type=“dog” animal=dog}} VGORNCVGUEQRG TGUVTKEVGFUEQRG
38. 15. Pre-compilation
39. 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
40. Questions?
41. Ryan Lewis ryanhlewis.com ryanmurakami ! " # 6JCPM[QW