Your SlideShare is downloading. ×
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply



Published on

Handlebars.js …


This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).

Published in: Education, Technology, Business

1 Comment
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Handlebars.js Ivano Malavolta ivano.malavolta@univaq.it
  • 2. Roadmap• Why Handlebars• Handlebars Basics• Usage with Require.JS
  • 3. Why HandlebarsWe are building apps, not web sitesWe want to separate presentation from logicWe don’t want to put any HTML element into Javascript code
  • 4. What we want to avoidImagine yourself trying to change how a movie should be rendered in your app...
  • 5. Roadmap• Why Handlebars• Handlebars Basics• Usage with Require.JS
  • 6. Example of Template<div class=“userEntry"> <h1> {{username}} </h1> <img> A handlebars expression {{profilePic}} is a {{, some contents, </img> followed by a }} <div class=“status“> {{status}} </div></div>
  • 7. Values EscapingHandlebars HTML-escapes all the values returned by a {{expression}}If you dont want Handlebars to escape a value, use the "triple-stash“<div class=“userEntry"> <h1>{{username}}</h1> <div class=“status“> {{{status}}} </div></div>
  • 8. Template ContextA context is a Javascript object used to populate a template var context = { username: “Ivano“, profilePic: “./images/pic.png“, status: “feeling good” };
  • 9. Compiling a TemplateTemplates are defined within a <script> tagor in external files<script id=“user-template" type="text/x-handlebars-template"> // template content</script>
  • 10. Compiling a TemplateHandlebars.compile is used to compile a templatevar source = $("#user-template").html();var template = Handlebars.compile(source);Compiling = obtaining a JS object representing the template
  • 11. Obtaining the final HTML codeYou have to execute a template with a context in order to get its corresponding HTML codevar context = {username: “Ivano“, status: “feeling good” };var html = template(context); <div class=“userEntry"> <h1>Ivano<h1> <div class=“status“> feeling good </div> </div>
  • 12. ExpressionsThe simplest expression is a simple identifier <h1>{{username}}</h1>This expression means "look up the title property in the current context"
  • 13. ExpressionsHandlebars expressions can also be dot-separated paths <h1>{{user.username}}</h1>This expression means "look up the user property in the current context, then look up the username property in the result"
  • 14. HelpersHelpers are Javascript functions that return HTML codeHandlebars.registerHelper(‘test‘, function(user) { return new Handlebars.SafeString( "<a href=" + + ">" + user.surname + "</a>" );});You should return a Handlebars SafeString if you dont want it to be escaped by default
  • 15. Calling HelpersA Handlebars helper call is a simple identifier, followed by zero or more parametersEach parameter is a Handlebars expressiones. {{{ test user }}}In this case, link is the name of a Handlebars helper, and user is a parameter to the helper
  • 16. Built-in Helpers With It shifts the context for a section of a template { title: "My first post!", author: { firstName: "Charles", lastName: "Jolley" } }<div class="entry“> <div class="entry“><h1>{{title}}</h1> <h1>My first post!</h1>{{#with author}} <h2>By Charles Jolley</h2><h2>By {{firstName}} {{lastName}}</h2> </div>{{/with}}</div>
  • 17. Built-in HelpersEachTo iterate over a listInside the block, you can use this to reference the element being iterated{ people: [ "Yehuda Katz", "Alan Johnson", "Charles Jolley" ] } <ul class="people_list"> <ul class="people_list"> {{#each people}} <li>Yehuda Katz</li> <li>{{this}}</li> <li>Alan Johnson</li> {{/each}} <li>Charles Jolley</li> </ul> </ul>
  • 18. Built-in HelpersIf - ElseTo conditionally render a blockIt will render the block if its argument is not equal to false, undefined, null, []<div class="entry">{{#if author}} The unless<h1>{{firstName}} {{lastName}}</h1> helper is the{{else}} inverse of if<h1>Unknown Author</h1>{{/if}}</div>
  • 19. Handlebars RecallEach Template can contains Expressions and Helpers operating on themYou can define your own Helpers that operate on expressions, they return HTML codeA template can be (pre)-compiled and must be executed with a Context in order to return the final HTML fragment
  • 20. Roadmap• Why Handlebars• Handlebars Basics• Usage with Require.JS
  • 21. Usage with Require.JSThere is a RequireJS plugin that allows you to• Automatically precompile all your templates• Manage templates dependencies with RequireJS• Refer to templates directly within your JS codeReference:
  • 22. Library UsageInclude the hbs.js plugin and the Handlebars.js file in the same directory of your require.jswww/js/lib/require.jswww/js/lib/hbs.jswww/js/lib/Handlebars.jswww/templates/Hi.hbs
  • 23. Template Definition// in file yourApp/templates/Hi.hbs<div class=“test"> Hi, my name is {{ name }}, nice to meet you!</div>
  • 24. Template ExecutionIn your JS files now you can require and execute your templateses.require([hbs!../templates/Hi], function ( tmplHi ) { $(‘#block’).html(tmplHi({name: “Ivano"})); });<div class=“test"> Hi, my name is Ivano, nice to meet you!</div>
  • 25.