Handlebars.js         Ivano Malavolta    ivano.malavolta@univaq.ithttp://www.di.univaq.it/malavolta
Roadmap• Why Handlebars• Handlebars Basics• Usage with Require.JS
Why HandlebarsWe are building apps, not web sitesWe want to separate presentation from logicWe don’t want to put any HTML ...
What we want to avoidImagine yourself trying to change how a movie should  be rendered in your app...
Roadmap• Why Handlebars• Handlebars Basics• Usage with Require.JS
Example of Template<div class=“userEntry">  <h1>     {{username}}  </h1>  <img>                   A handlebars expression ...
Values EscapingHandlebars HTML-escapes all the values returned by  a {{expression}}If you dont want Handlebars to escape a...
Template ContextA context is a Javascript object used to populate a  template   var context = {     username: “Ivano“,    ...
Compiling a TemplateTemplates are defined within a <script> tagor in external files<script id=“user-template" type="text/x...
Compiling a TemplateHandlebars.compile is used to compile a templatevar source = $("#user-template").html();var template =...
Obtaining the final HTML codeYou have to execute a template with a context in order  to get its corresponding HTML codevar...
ExpressionsThe simplest expression is a simple identifier  <h1>{{username}}</h1>This expression means  "look up the title ...
ExpressionsHandlebars expressions can also be dot-separated  paths  <h1>{{user.username}}</h1>This expression means  "look...
HelpersHelpers are Javascript functions that return HTML codeHandlebars.registerHelper(‘test‘, function(user) {    return ...
Calling HelpersA Handlebars helper call is a simple identifier,  followed by zero or more parametersEach parameter is a Ha...
Built-in Helpers  With  It shifts the context for a section of a template              { title: "My first post!",         ...
Built-in HelpersEachTo iterate over a listInside the block, you can use this to reference the  element being iterated{ peo...
Built-in HelpersIf - ElseTo conditionally render a blockIt will render the block if its argument is not equal to  false, u...
Handlebars RecallEach Template can contains Expressions and Helpers  operating on themYou can define your own Helpers that...
Roadmap• Why Handlebars• Handlebars Basics• Usage with Require.JS
Usage with Require.JSThere is a RequireJS plugin that allows you to• Automatically precompile all your templates• Manage t...
Library UsageInclude the hbs.js plugin and the Handlebars.js  file in the same directory of your require.jswww/js/lib/requ...
Template Definition// in file yourApp/templates/Hi.hbs<div class=“test">  Hi, my name is {{ name }}, nice to meet you!</div>
Template ExecutionIn your JS files now you can require and execute your  templateses.require([hbs!../templates/Hi], functi...
Referenceshandlebarsjs.com
Upcoming SlideShare
Loading in...5
×

Handlebars.js

6,637

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).

http://www.di.univaq.it/malavolta

Published in: Education, Technology, Business
1 Comment
11 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,637
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
180
Comments
1
Likes
11
Embeds 0
No embeds

No notes for slide

Handlebars.js

  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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×