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

Handlebars.js

on

  • 7,022 views

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

Statistics

Views

Total Views
7,022
Views on SlideShare
7,022
Embed Views
0

Actions

Likes
10
Downloads
151
Comments
1

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Handlebars.js Handlebars.js Presentation Transcript

  • 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 element into Javascript code
  • 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 {{profilePic}} is a {{, some contents, </img> followed by a }} <div class=“status“> {{status}} </div></div>
  • 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>
  • Template ContextA context is a Javascript object used to populate a template var context = { username: “Ivano“, profilePic: “./images/pic.png“, status: “feeling good” };
  • Compiling a TemplateTemplates are defined within a <script> tagor in external files<script id=“user-template" type="text/x-handlebars-template"> // template content</script>
  • 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
  • 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>
  • ExpressionsThe simplest expression is a simple identifier <h1>{{username}}</h1>This expression means "look up the title property in the current context"
  • 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"
  • 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
  • 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
  • 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>
  • 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>
  • 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>
  • 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
  • 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 templates dependencies with RequireJS• Refer to templates directly within your JS codeReference:https://github.com/SlexAxton/require-handlebars-plugin
  • 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
  • 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], function ( tmplHi ) { $(‘#block’).html(tmplHi({name: “Ivano"})); });<div class=“test"> Hi, my name is Ivano, nice to meet you!</div>
  • Referenceshandlebarsjs.com