The beta version of the jQuery Templates
plugin is now hosted on the Microsoft Ajax CDN. You can start using the jQuery Templates
plugin in your application by referencing both jQuery 1.4.2 and jQuery Templates from the CDN. Here are the two script tags that you will want to use when developing an application: <script type="text/javascript" src=”http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js”></script> <script type="text/javascript" src=”http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js”></script> In addition, minified versions of both files are available from the CDN: <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> Here’s a full code sample of using jQuery Templates from the CDN to display pictures of cats from Flickr: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cats</title>
<style type="text/css">
html {
background-color:Orange;
}
#catBox div {
width:250px;
height:250px;
border:solid 1px black;
background-color:White;
margin:5px;
padding:5px;
float:left;
}
#catBox img {
width:200px;
height: 200px;
}
</style>
</head>
<body>
<h1>Cat Photos!</h1>
<div id="catBox"></div>
<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>
<script id="catTemplate" type="text/x-jquery-tmpl">
<div>
<b>${title}</b>
<br />
<img src="${media.m}" />
</div>
</script>
<script type="text/javascript">
var url = "http://api.flickr.com/services/feeds/groups_pool.gne?id=44124373027@N01&lang=en-us&format=json&jsoncallback=?";
// Grab some flickr images of cats
$.getJSON(url, function (data) {
// Format the data using the catTemplate template
$("#catTemplate").tmpl(data.items).appendTo("#catBox");
});
</script>
</body>
</html>
This page displays a list of cats retrieved from Flickr:
Notice that the cat pictures are retrieved and rendered with just a few lines of code:
var url = "http://api.flickr.com/services/feeds/groups_pool.gne?id=44124373027@N01&lang=en-us&format=json&jsoncallback=?";
// Grab some flickr images of cats
$.getJSON(url, function (data) {
// Format the data using the catTemplate template
$("#catTemplate").tmpl(data.items).appendTo("#catBox");
});
The final line of code, the one that calls the tmpl() method, uses the Templates
plugin to render the cat photos in a template named catTemplate. The catTemplate template is contained within a SCRIPT element with type="text/x-jquery-tmpl".
The jQuery Templates
plugin is an “official” jQuery
plugin which will be included in jQuery 1.5 (the next major release of jQuery). You can read the full documentation for the
plugin at the jQuery website:
http://api.jquery.com/category/plugins/templates/
The jQuery Templates
plugin is still beta so we would really appreciate your feedback on the
plugin. Let us know if you use the Templates
plugin in your website.
