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:
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.
Stephen, I think the biggest issue I see in the current build is lack of error handling. Expression errors currently seem to simply not rendered which is probably not ideal. I would think throwing an exception or better yet rendering an error into the output would be much better. Some way to trap the errors seems crucial to testing as well…
Another thing that would be nice (for debugging at least) is to allow generating HTML output instead of just a jQuery set.
Expression errors currently seem to simply not rendered which is probably not ideal.
Two thumbs up, comrade.
Hi Rick,
The Templates plugin does not throw for undefined fields so we can support the dynamic nature of JavaScript objects. For example, you might want to display an array of movies like the following in a template:
[
{ "Name": "The Red Violin", "ReleaseYear": "1998" },
{ "Name": "Eyes Wide Shut" },
{ "Name": "The Inheritance", "ReleaseYear": "1976", "Director": "Mauro Bolognini" }
]
Notice that each movie has different fields (the second one does not have a ReleaseYear and or a Director field). We don’t want templates to fail in these cases.
Can you confirm or deny whether or not we can use jq Templates for content that would need to be indexed by search engines? I’m assuming that JSON is not SEO friendly, but I’d love to be able to use templates for my content instead of repeaters.
great……..waiting for final release
A couple of posts back, you expressed some surprise when someone said they’d found the MS CDN slower than Google.
We see this too here in the UK – the basic minimized JQuery 1.4.2 takes 50-100ms to fetch from Google and 150-250ms to fetch from MS. (The Google version is also smaller, but I doubt that’s very significant). Even our UK-based DiscountASP.net server was significantly faster at delivering the jQ files than the MS CDN.
Not everything’s perfect at Google, of course -their UI theme files seem to be served without proper cache control for example, but they are a *lot* faster, at least from where I’m sitting.
Happy to help if someone wants to look at this in more detail.
@rockinthesixstring – It depends. If you need SEO then I recommend that you do your initial rendering without using client templates. After the initial rendering, you can perform paging and sorting using client templates (and get the performance and interactivity advantages of using client templates).
@Will – Yes, the performance that you are getting from the UK surprises me. I will pass the results that you are reporting to our CDN infrastructure people.
Hi, is it possible to add colorbox plugin into cdn?