requirejs & handlebars
DESCRIPTION
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.comTRANSCRIPT
(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>
•
•
•