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.
