Handlebars
Jump to navigation
Jump to search
Handlebars
Load the handlebar.js from handlebarjs.com
HTML CODE
<body>
<script id="content" type="text/x-hanglebars-template">
<li>{{name}}</li>
<li>{{date}}</li>
<p>{{comment}}</p>
</script>
<div id="licontent">
<ul> </ul>
</div>
<div id="loop">
</div>
<script id="lcontent" type="text/x-hanglebars-template">
{{#each theImages}}
<h3>{{this.headline}}</h3>
<p> <img src="images/{{this.image}}" alt="{{this.id}}" /> </p>
<p>{{this.textcontent}}</p>
{{/each}}
</script>
<script src="usinghandle.js"></script>
</body>
Javascript Code
var data = {
name: "Robert",
date: "totay",
comment: "This is a comment"
};
var content = {
theImages: [{
id: 1,
image: "002.jpg",
headline: "Classic Strap (Single Wood Door Kit)",
textcontent: "as either a Sliding or Rolling Barndoor, these kits come with all o"
},
{
id: 2,
image: "003.jpg",
headline: "The BrownStone",
textcontent: "Easily install a classic barndoor with Architectural Products by Outwater's Barndoor Hardware Kits. Available "
}, {
id: 3,
image: "004.jpg",
headline: "The loft",
textcontent: "the hardware needed for a trouble-free installation and are availabl"
}, {
id: 4,
image: "005.jpg",
headline: "The Townhouse",
textcontent: "an assortment of finishes such as, Matte Black, Espresso, and Stainless "
}
]
};
var source = $("#content").html();
var template = Handlebars.compile(source);
$('ul').append(template(data));
var lsource = $("#lcontent").html();
var ltemplate = Handlebars.compile(lsource);
var compiledhtml = ltemplate(content);
$('#loop').append(compiledhtml);