<!DOCTYPE html>
<html>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
//Declare the template here
<script id="movieTemplate" type="text/x-handlebars-template">
<table style="width:100%">
<tr>
<th>ReleaseYear</th>
<th>Director</th>
</tr>
{{#each this.movies}}
<tr>
<td>{{ReleaseYear}}</td>
<td>{{Director}}</td>
</tr>
{{/each}}
</table>
</script>
<body>
//Final data will be rendered here
<div id="results"></div>
</body>
<script type="text/javascript">
var data = {}
var movies = [
{ ReleaseYear: "1998", Director: "Francois Girard" },
{ ReleaseYear: "1999", Director: "Stanley Kubrick" },
{ ReleaseYear: "1976", Director: "Mauro Bolognini" }
];
data.movies=movies;
// Grab the template script
var html = $( "#movieTemplate" ).html();
// Compile the template
var theTemplate = Handlebars.compile(html);
// Pass our data to the template
var theCompiledHtml = theTemplate(data);
//Assign to html div
$('#results').html(theCompiledHtml);
</script>
</html>
<html>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
//Declare the template here
<script id="movieTemplate" type="text/x-handlebars-template">
<table style="width:100%">
<tr>
<th>ReleaseYear</th>
<th>Director</th>
</tr>
{{#each this.movies}}
<tr>
<td>{{ReleaseYear}}</td>
<td>{{Director}}</td>
</tr>
{{/each}}
</table>
</script>
<body>
//Final data will be rendered here
<div id="results"></div>
</body>
<script type="text/javascript">
var data = {}
var movies = [
{ ReleaseYear: "1998", Director: "Francois Girard" },
{ ReleaseYear: "1999", Director: "Stanley Kubrick" },
{ ReleaseYear: "1976", Director: "Mauro Bolognini" }
];
data.movies=movies;
// Grab the template script
var html = $( "#movieTemplate" ).html();
// Compile the template
var theTemplate = Handlebars.compile(html);
// Pass our data to the template
var theCompiledHtml = theTemplate(data);
//Assign to html div
$('#results').html(theCompiledHtml);
</script>
</html>
No comments:
Post a Comment