Published on


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

No notes for slide


  1. 1. Handlebars.js Ivano Malavolta ivano.malavolta@univaq.ithttp://www.di.univaq.it/malavolta
  2. 2. Roadmap• Why Handlebars• Handlebars Basics• Usage with Require.JS
  3. 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. 4. What we want to avoidImagine yourself trying to change how a movie should be rendered in your app...
  5. 5. Roadmap• Why Handlebars• Handlebars Basics• Usage with Require.JS
  6. 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. 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. 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. 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. 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. 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. 12. ExpressionsThe simplest expression is a simple identifier <h1>{{username}}</h1>This expression means "look up the title property in the current context"
  13. 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. 14. HelpersHelpers are Javascript functions that return HTML codeHandlebars.registerHelper(‘test‘, function(user) { return new Handlebars.SafeString( "<a href=" + user.name + ">" + user.surname + "</a>" );});You should return a Handlebars SafeString if you dont want it to be escaped by default
  15. 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. 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. 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. 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. 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. 20. Roadmap• Why Handlebars• Handlebars Basics• Usage with Require.JS
  21. 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:https://github.com/SlexAxton/require-handlebars-plugin
  22. 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. 23. Template Definition// in file yourApp/templates/Hi.hbs<div class=“test"> Hi, my name is {{ name }}, nice to meet you!</div>
  24. 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. 25. Referenceshandlebarsjs.com