jQuery Templates : How To Use Them

04 Nov 2011
0 comments

We're going to show you how to use the new jQuery templating plugin. With just a few lines of code you'll see how easy it is to output JSON data.
 

Final Result : Using Microsoft's jQuery templating plugin to display a Flickr photoset

This is what the final result will look like.

Step 1 : Get a JSON feed of a Flickr photoset

Grab a Flickr photoset url by going to any photoset, clicking on the RSS button in the url bar, and replacing the '&format=RSS' part of the URL with '&format=json&jsoncallback=?'

In this case, the Flickr feed URL we chose is :

http://api.flickr.com/services/feeds/photoset.gne?set=72157605672626680&nsid=19800575@N04&lang=en-us&format=json&jsoncallback=?

Step 2 : Include the jQuery and the jQuery templating plugin


?
1
2
<script src="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src=text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>



Step 3 : Write jQuery code to read the JSON from Flickr


?
1
2
3
4
5
6
7
8
$(document).ready(function () {
  var flickrStreamUrl = "http://api.flickr.com/services/feeds/photoset.gne?set=72157605672626680&nsid=19800575@N04<=en-us&format=json&jsoncallback=?";
 
  $.getJSON(flickrStreamUrl, function (data) {
     $("#tmplFlickrStream").tmpl(data.items).appendTo("#results");
     $("#tmplFlickrStream").append('<div style="clear: both;"></div>');
     });
   });



Step 4 : Write your template


?
1
2
3
4
5
6
<script id="tmplFlickrStream" type="text/x-jquery-tmpl">
  <div class="Image">
    <a title="${title}" href="${link}"><img src="${getSmallThumbnail(media.m)}" /></a>
    <div class="Description"><a title="${title}" href="${link}">${displayTitle(title, 20)}</a></div>
  </div>
</script>




Step 5 : Add some style


?
1
2
3
4
5
<script>
 .Image {float:left;margin:35px 35px; width:100px; height:100px;text-align:center;}
 .Image img{border:1px solid #777;}
 .Image .Description {font-size:12px; font-family:Helvetica, Arial; margin-top:8px;}
</script>



Step 6 : Add some functions to your template


?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
//function to return smaller, square thumbnails (75 x 75) since flickr only returns the larger non-square thumbnails in the feed
function getSmallThumbnail(url) {
    return url.replace("_m.jpg", "_s.jpg");
}
 
//truncate text if too long
function displayTitle(title, maxLength) {
    if (title.length > maxLength) {
        title = trunc = title.substring(0, maxLength) + ' ...';
    }
    return title;
}
</script>



Full Source Code


?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!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></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
 
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
    
 
<style>
.Image {float:left;margin:35px 35px; width:100px; height:100px;text-align:center;}
.Image img{border:1px solid #777;}
.Image .Description {font-size:12px; font-family:Helvetica, Arial; margin-top:8px;}
</style>
 
</head>
 
<body>
 
<script type="text/javascript">
$(document).ready(function () {
    var flickrStreamUrl = "http://api.flickr.com/services/feeds/photoset.gne?set=72157605672626680&nsid=19800575@N04&lang=en-us&format=json&jsoncallback=?";
    $.getJSON(flickrStreamUrl, function (data) {
        $("#tmplFlickrStream").tmpl(data.items).appendTo("#results");
        $("#tmplFlickrStream").append('<div style="clear:both;"></div>');
    });
});
 
//function to return smaller, square thumbnails (75 x 75) since flickr only returns the larger non-square thumbnails in the feed
function getSmallThumbnail(url) {
    return url.replace("_m.jpg", "_s.jpg");
}
 
//truncate text if too long
function displayTitle(title, maxLength) {
    if (title.length > maxLength) {
        title = trunc = title.substring(0, maxLength) + ' ...';
    }
    return title;
}
</script>
 
<script id="tmplFlickrStream" type="text/x-jquery-tmpl">
<div class="Image">
    <a title="${title}" href="${link}"><img src="${getSmallThumbnail(media.m)}" /></a>
    <div class="Description"><a title="${title}" href="${link}">${displayTitle(title, 20)}</a></div>
</div>
</script> 
 
<!-- This is where the results will be displayed -->
<div id="results"></div>
 
</body>
</html>



More Information

See jQuery templates on github jQuery templates on github