Difference between revisions of "Example1"
Jump to navigation
Jump to search
| Line 77: | Line 77: | ||
$('#loop').append(compiledhtml); | $('#loop').append(compiledhtml); | ||
</pre> | </pre> | ||
==[[#top|Back To Top]]< — >[[ | ==[[#top|Back To Top]]< — >[[Handlebars|Category]]< — > - [[Java Script|Java Script Category]][[Main_Page| Home]]== | ||
Revision as of 16:52, 17 January 2017
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 me with all o"
},
{
id: 2,
image: "003.jpg",
headline: "The BrownStone",
textcontent: "Easily install Available "
}, {
id: 3,
image: "004.jpg",
headline: "The loft",
textcontent: "the hardware nare availabl"
}, {
id: 4,
image: "005.jpg",
headline: "The Townhouse",
textcontent: "an a 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);