RequireJS & Handlebars
Upcoming SlideShare
Loading in...5
×
 

RequireJS & Handlebars

on

  • 5,300 views

RequireJS & Handlebars ...

RequireJS & Handlebars

This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2013.

http://www.ivanomalavolta.com

Statistics

Views

Total Views
5,300
Views on SlideShare
5,239
Embed Views
61

Actions

Likes
10
Downloads
78
Comments
0

2 Embeds 61

http://www.ivanomalavolta.com 60
https://twitter.com 1

Accessibility

Categories

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

RequireJS & Handlebars RequireJS & Handlebars Presentation Transcript

  • 
  • (function () {// ... vars and functions defined here are// local to this module// here you can also access global variables}());
  • ••••
  • <div class=“userEntry"><h1>{{username}}</h1><img>{{profilePic}}</img><div class=“status“>{{status}}</div></div>
  • <div class=“userEntry"><h1>{{username}}</h1><div class=“status“>{{{status}}}</div></div>
  • var context = {username: “Ivano“,profilePic: “./images/pic.png“,status: “feeling good”};
  • <script id=“user-template"type="text/x-handlebars-template">// template content</script>
  • var source = $("#user-template").html();var template = Handlebars.compile(source);
  • var context = {username: “Ivano“,status: “feeling good” };var html = template(context);<div class=“userEntry"><h1>Ivano<h1><div class=“status“>feeling good</div></div>
  • <h1>{{username}}</h1>
  • <h1>{{user.username}}</h1>
  • Handlebars.registerHelper(‘test‘, function(user) {return new Handlebars.SafeString("<a href=" + user.name + ">" +user.surname + "</a>");});
  • {{ test user }}
  • <div class="entry“><h1>{{title}}</h1>{{#with author}}<h2>By {{firstName}} {{lastName}}</h2>{{/with}}</div>{ title: "My first post!",author: { firstName: "Charles", lastName: "Jolley" }}<div class="entry“><h1>My first post!</h1><h2>By Charles Jolley</h2></div>
  • <ul class="people_list">{{#each people}}<li>{{this}}</li>{{/each}}</ul>{ people: [ "Yehuda Katz", "Alan Johnson", "Charles Jolley" ] }<ul class="people_list"><li>Yehuda Katz</li><li>Alan Johnson</li><li>Charles Jolley</li></ul>
  • <div class="entry">{{#if author}}<h1>{{firstName}} {{lastName}}</h1>{{else}}<h1>Unknown Author</h1>{{/if}}</div>
  • •••