Handlebars.js
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Handlebars.js

  • 7,371 views
Uploaded on

Handlebars.js...

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
7,371
On Slideshare
7,371
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
158
Comments
1
Likes
10

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Handlebars.js Ivano Malavolta ivano.malavolta@univaq.ithttp://www.di.univaq.it/malavolta
  • 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.name + ">" + 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:https://github.com/SlexAxton/require-handlebars-plugin
  • 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. Referenceshandlebarsjs.com