jQuery Templates on Microsoft Ajax CDN
- by Stephen Walther
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.
