Jquery Template :- Is utilized to construct html dynamically by passing json
<!DOCTYPE html>
<html>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
//Declare the template here
<script id="movieTemplate" type="text/x-jquery-tmpl">
<table style="width:100%">
<tr>
<th>ReleaseYear</th>
<th>Director</th>
</tr>
{{each data.movie}}
<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.movie=movies;
//Invocation of template
var html = $( "#movieTemplate" ).tmpl( data ).html();
$('#results').html(html);
</script>
</html>
<!DOCTYPE html>
<html>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
//Declare the template here
<script id="movieTemplate" type="text/x-jquery-tmpl">
<table style="width:100%">
<tr>
<th>ReleaseYear</th>
<th>Director</th>
</tr>
{{each data.movie}}
<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.movie=movies;
//Invocation of template
var html = $( "#movieTemplate" ).tmpl( data ).html();
$('#results').html(html);
</script>
</html>
No comments:
Post a Comment