jQuery Templates Example

This page is a companion to my blog post that shows how you can pull in photographs from the public Flickr feed asynchronously (using jQuery Ajax and JsonP) and display them easily using the new (and currently beta) jQuery Templates plug-in. If everything is working then you should see the latest images from the public Flickr timeline appear below.

Images Appear Below

Explanation Blog Post

For a full explanation of how this works please read my companion blog post - Using jQuery Templates to Bind to JSON data.

Example Code

The easiest way to see how this works is view the page source. But the code can be summed up below:

<!-- This is the template -->
<script id="flickrTemplate" type="text/x-jquery-tmpl">
	<li>
		<h2>${title}</h2>
		<div><a href="${link}"><img src="${media.m}" alt="${title}" /></a></div>
	</li>
</script>

<!-- This is the jQuery Ajax request to Flickr that populates the data fed to the template -->
	$(document).ready(function()
	{
		$.ajax({
			url: "http://api.flickr.com/services/feeds/photos_public.gne",
			data: "format=json",
			jsonp: "jsoncallback",
			dataType: "jsonp",
			success: function(data)
			{
				$("#flickrTemplate").tmpl(data.items).appendTo("#placeholder");
			}
		});
	});
	
<!-- This is the placeholder where each template item will be rendered after 'binding' to the JSON data returned from Flickr -->
<ul id="placeholder"></ul>