The beta1 version of jQuery Templates is available on CDN at:
- http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js
- http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js
Example for Jquery Templet
<!DOCTYPE html>
<html>
<head>
<style>
table { border-collapse:collapse; margin:8px; background-color:#f8f8f8; }
table td { border:1px solid blue; padding:3px; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
</head>
<body>
<button id="showBtn">Show movies</button><br/>
<table><tbody id="movieList"></tbody></table>
<script>
var movies = [
{ Name: "The Red Violin", ReleaseYear: "1998", Director: "François Girard" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999", Director: "Stanley Kubrick" },
{ Name: "The Inheritance", ReleaseYear: "1976", Director: "Mauro Bolognini" }
];
var markup = "<tr><td colspan='2'>${Name}</td><td>Released: ${ReleaseYear}</td><td>Director: ${Director}</td></tr>"
/* Compile markup string as a named template */
$.template( "movieTemplate", markup );
/* Render the named template */
$( "#showBtn" ).click( function() {
$( "#movieList" ).empty();
$.tmpl( "movieTemplate", movies ).appendTo( "#movieList" );
});
</script>
</body>
</html>
Example 2:
Example:
Dynamic switching of templates, using $.template() to obtain compiled template.
<!DOCTYPE html>
<html>
<head>
<style>
table { cursor:pointer; border-collapse:collapse;
border:2px solid blue; width:300px; margin:8px; }
table tr { border:1px solid blue; color:blue; background-color:#f8f8f8; }
table td { padding:3px; } table tr:hover { color:red; }
.movieDetail { background-color:yellow; }
.movieDetail.row1 { border-bottom:none; }
.movieDetail.row2 { border-top:none; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
</head>
<body>
Click for details:<table><tbody id="movieList"></tbody></table>
<script>
var movies = [
{ Name: "The Red Violin", ReleaseYear: "1998", Director: "François Girard" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999", Director: "Stanley Kubrick" },
{ Name: "The Inheritance", ReleaseYear: "1976", Director: "Mauro Bolognini" }
];
var selectedItem = null;
/* Create the compiled templates */
$.template(
"summaryTemplate",
"<tr class='movieSummary'><td colspan='2'>${Name}</td></tr>"
);
$.template(
"detailTemplate",
"<tr class='movieDetail row1'><td colspan='2'>${Name}</td></tr><tr class='movieDetail row2'><td>${ReleaseYear}</td><td>Director: ${Director}</td></tr>"
);
/* Render the summaryTemplate with the "movies" data */
$.tmpl( "summaryTemplate", movies ).appendTo( "#movieList" );
$( "#movieList" )
.delegate( ".movieSummary", "click", function () {
if (selectedItem) {
/* Switch the template for this template item to
the named template, then update the rendered item */
selectedItem.tmpl = $.template( "summaryTemplate" );
selectedItem.update();
}
selectedItem = $.tmplItem(this);
/* Switch the template for this template item */
selectedItem.tmpl = $.template( "detailTemplate" );
selectedItem.update();
})
.delegate( ".movieDetail", "click", function () {
/* Switch the template for this template item */
selectedItem.tmpl = $.template( "summaryTemplate" );
selectedItem.update();
selectedItem = null;
});
</script>
</body>
</html>Reference:http://api.jquery.com/jQuery.template/
No comments:
Post a Comment