Difference between revisions of "Handlebars"
Jump to navigation
Jump to search
(Created page with "=Handlebars= ''' Load the handlebar.js from handlebarjs.com''' ==HTML CODE == <pre> <body> <script id="content" type="text/x-hanglebars-template"> <li>{{name}}</l...") |
|||
| Line 45: | Line 45: | ||
image: "002.jpg", | image: "002.jpg", | ||
headline: "Classic Strap (Single Wood Door Kit)", | headline: "Classic Strap (Single Wood Door Kit)", | ||
textcontent: "as either | textcontent: "as either me with all o" | ||
}, | }, | ||
| Line 52: | Line 52: | ||
image: "003.jpg", | image: "003.jpg", | ||
headline: "The BrownStone", | headline: "The BrownStone", | ||
textcontent: "Easily install | textcontent: "Easily install Available " | ||
}, { | }, { | ||
id: 3, | id: 3, | ||
image: "004.jpg", | image: "004.jpg", | ||
headline: "The loft", | headline: "The loft", | ||
textcontent: "the hardware | textcontent: "the hardware nare availabl" | ||
}, { | }, { | ||
id: 4, | id: 4, | ||
image: "005.jpg", | image: "005.jpg", | ||
headline: "The Townhouse", | headline: "The Townhouse", | ||
textcontent: "an | textcontent: "an a Stainless " | ||
} | } | ||
Revision as of 23:12, 16 January 2017
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 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);