Handlebars Tutorial Beginners
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.min.js"></script>
<div id="hd-begin">
<script id="hb-template" type="text/x-handlebars-template">
<div class = "post">
<h1> By {{fullName author}} </h1>
<div class="body">{{body}}</div >
<h3> Comments </h3>
{{#each comments}}
<div class ="body"> {{body}}
<span> - <b>By {{fullName author}}</b></span>
</div>
{{/each }}
</div>
</script>
</div>
JavaScript
var source = '<div class = "post"> <h1> By {{fullName author}} </h1><div class="body">{{body}}</div > <h3> Comments </h3>{{#each comments}} <div class ="body"> {{body}} <span> - <b>By {{fullName author}}</b></span></div> {{/each }}</div>'
var template = Handlebars.compile(source);
var context = {
author: {
firstName: "Mohammed",
lastName: "Safeer"
},
body: "Handlebars is a Logic-less Template. I Love Handlebars",
comments: [{
author: {
firstName: "David",
lastName: "James"
},
body: "Me too!"
},{
author: {
firstName: "Brad",
lastName: "Hodge"
},
body: "I'm also love Handlebars!"
}]
};
Handlebars.registerHelper('fullName', function (person) {
return person.firstName + " " + person.lastName;
});
var html = template(context);
$('#hd-begin').html(html);