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

Like this? Share it with your network

Share

RequireJS & Handlebars

  • 6,097 views
Uploaded on

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

More in: Technology , Travel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,097
On Slideshare
6,030
From Embeds
67
Number of Embeds
2

Actions

Shares
Downloads
85
Comments
0
Likes
10

Embeds 67

http://www.ivanomalavolta.com 65
https://twitter.com 2

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. 
  • 2. (function () {// ... vars and functions defined here are// local to this module// here you can also access global variables}());
  • 3. ••••
  • 4. <div class=“userEntry"><h1>{{username}}</h1><img>{{profilePic}}</img><div class=“status“>{{status}}</div></div>
  • 5. <div class=“userEntry"><h1>{{username}}</h1><div class=“status“>{{{status}}}</div></div>
  • 6. var context = {username: “Ivano“,profilePic: “./images/pic.png“,status: “feeling good”};
  • 7. <script id=“user-template"type="text/x-handlebars-template">// template content</script>
  • 8. var source = $("#user-template").html();var template = Handlebars.compile(source);
  • 9. var context = {username: “Ivano“,status: “feeling good” };var html = template(context);<div class=“userEntry"><h1>Ivano<h1><div class=“status“>feeling good</div></div>
  • 10. <h1>{{username}}</h1>
  • 11. <h1>{{user.username}}</h1>
  • 12. Handlebars.registerHelper(‘test‘, function(user) {return new Handlebars.SafeString("<a href=" + user.name + ">" +user.surname + "</a>");});
  • 13. {{ test user }}
  • 14. <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>
  • 15. <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>
  • 16. <div class="entry">{{#if author}}<h1>{{firstName}} {{lastName}}</h1>{{else}}<h1>Unknown Author</h1>{{/if}}</div>
  • 17. •••