Transcript
Page 1: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

Plumbing the Depths of Handlebars

2015

Page 2: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

Ryan Lewis

ryanhlewis.com

ryanmurakami ! "

#

Page 3: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}
Page 4: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

www.pluralsight.com/courses/handlebars-javascript-templating

Page 5: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

1. Where are Helpers?

Page 6: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

Handlebars.registerHelper(‘isCorrect’, function() { return false; });

Handlebars.helpers.isCorrect = function() { return false;}

Page 7: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

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

Page 8: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

2. Helpers first

Page 9: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

{ name: ‘Ness’, city: ‘Onett’, isCorrect: true }

Handlebars.registerHelper(‘isCorrect’, function() { return false; });

{{#if isCorrect}} I’m right!{{/if}}

Page 10: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

You can prefix properties with this to avoid

collisions

Page 11: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

Postfix all your helpers with “helper”

Page 12: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

3. Conditional block syntax

Page 13: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

{{#if isCorrect}}Dogs are the best!

{{/if}}

{{#isCorrect}}Dogs are the best!{{/isCorrect}}

Page 14: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

4. Handlebars implementations

Page 15: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

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

Page 16: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

5. node ♥ Handlebars

Page 17: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

server.views({engines: { html: require('handlebars') },path: __dirname + '/templates',partialsPath: __dirname + '/templates/partials'

});

hapi.js

express.jsvar app = express();app.engine('handlebars',

require(‘express-handlebars’)({defaultLayout: 'main'}));

app.set('view engine', 'handlebars');

Page 18: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

6. Handlebars is alive!

Page 19: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

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?

Page 20: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

7. this in helpers

Page 21: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

Handlebars.registerHelper(‘helpHelper’, function() { return this.needsHelp; });

{ needsHelp: ‘shore do!’ }

{{helpHelper}}

shore do!

Page 22: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

8. this is mutable in helpers

Page 23: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

Handlebars.registerHelper(‘helpHelper’, function() { this.needsHelp = ‘corse not!’; });

{ needsHelp: ‘shore do!’ }

{{helpHelper}}{{needsHelp}}

corse not!

Page 24: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

9. Executing function properties

Page 25: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

{ name: ‘Paula’, getIt: function() { return ‘got it!’; }}

{{getIt}}

got it!

Page 26: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

10. Re-scoping partials

Page 27: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

{{> myPartial dog=“panda”}}

Handlebars.partial(‘myPartial, ‘{{dog}}’);

panda

Page 28: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

11. @data variables

Page 29: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

@rootroot context

@firsttrue if first iteration

@indexzero-based iteration index

@keykey name

Page 30: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

12. Inline partials in 4.0

Page 31: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

{{#*inline ‘fullName’}} {{firstName}} {{lastName}}{{/inline}}

<h2>Hello {{> fullName}},</h2><h3>Friends:</h3><ul> {{#each friends}} <li>{{> fullName}}</li> {{/each}}</ul>

Page 32: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

13. Decorate your templates

Page 33: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

Handlebars.registerDecorator(‘debug’, function(program, props, container, context) {

console.log(‘Debug: ‘ + JSON.stringify(context.data));});

{{* debug}}<h1>{{dog.name}}</h1><p>{{dog.desc}}</p>

Debug: {"root":{"pet":{"name":"Garfunkel","desc":"Best dog","isDog":true}}}

Page 34: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

14. Control the whitespace

Page 35: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

{{#blocks~}}{{~/blocks}}

{{~properties~}}

{{~helpers with=arguments~}}

{{~*decorators~}}

{{~!-- comments --~}}

Page 36: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

15. Pre-compilation

Page 37: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

handlebars: { compile: { options: { namespace: "JST" }, files: { "result.js": "source.hbs" } }}

grunt-contrib-handlebarsmodule.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

Page 38: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

Questions?

Page 39: Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}

Ryan Lewis ryanhlewis.com ryanmurakami! "#


Recommended