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

3. 


7. (function () {
// ... vars and functions defined here are
// local to this module
// here you can also access global variables
}());

16. •
•
•
•

22. <div class=“userEntry">
<h1>
{{username}}
</h1>
<img>
{{profilePic}}
</img>
<div class=“status“>
{{status}}
</div>
</div>

23. <div class=“userEntry">
<h1>{{username}}</h1>
<div class=“status“>
{{{status}}}
</div>
</div>

24. var context = {
username: “Ivano“,
profilePic: “./images/pic.png“,
status: “feeling good”
};

25. <script id=“user-template"
type="text/x-handlebars-template">
// template content
</script>

26. var source = $("#user-template").html();
var template = Handlebars.compile(source);

27. var context = {username: “Ivano“,
status: “feeling good” };
var html = template(context);
<div class=“userEntry">
<h1>Ivano<h1>
<div class=“status“>
feeling good
</div>
</div>

28. <h1>{{username}}</h1>

29. <h1>{{user.username}}</h1>

30. Handlebars.registerHelper(‘test‘, function(user) {
return new Handlebars.SafeString(
"<a href='" + user.name + "'>" +
user.surname + "</a>"
);
});

31. {{ test user }}

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

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

34. <div class="entry">
{{#if author}}
<h1>{{firstName}} {{lastName}}</h1>
{{else}}
<h1>Unknown Author</h1>
{{/if}}
</div>

37. •
•
•