The document discusses the usage of Handlebars, a JavaScript templating engine, to create user interface components such as user entries and posts. It includes code snippets demonstrating template compilation, context setting, helper functions, and conditional rendering. The examples highlight how to dynamically display user information, post titles, and author details in an HTML format.

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