JQTemplate is a lightweight and super fast javascript templating engine built as a jQuery plugin. It is great for building simple iterative templates and the development version weighs in at a whopping 1.4KB. The current version relies on tables to serve as the template with plans for future versions to allow for block layout templates as well as lists. JQTemplate was inspired by the awesome PURE.JS project, http://beebole.com/pure/, by Michael Cvilic.

ASSETS As per the Google Code project page

• jqtemplate.js core jqtemplate plugin code

BASIC USAGE

$(target).jQTemplate(data<object || array>, modifier<object>, template<string || selector>);

DEMOS

• Link to the Google Code page containing the examples: http://code.google.com/p/jqtemplate/source/browse/trunk/examples

DEMO 1 - iterate over array of objects into block template (css table)

This example shows how to take an array of objects (a list of products) and render them in a CSS "table" layout through simple iteration.
jQTemplate call:

var movies = [
		{title:'The Last Picture Show', year:'1971', genre:'Drama', rating:'8.1/10'},
		{title:'The Dark Knight', year:'2008', genre:'Action', rating:'8.9/10'},
		{title:'Pulp Fiction', year:'1994', genre:'Drama', rating:'8.9/10'},
		{title:'Raiders of the Lost Ark', year:'1981', genre:'Action', rating:'8.7/10'},
		{title:'Aliens', year:'1986', genre:'Sci-Fi', rating:'8.5/10'}
	];
$('#blockResult').jQTemplate(movies, {}, '.templates .movieTemplate');

Template HTML:

<div class="templates" style="display:none;">
	<div class="movieTemplate">
		<div class="header">
			<div class="title">Title</div>
			<div class="year">Release Year</div>
			<div class="genre">Genre</div>
			<div class="rating">Rating</div>
		</div>
		<div class="itr">
			<div class="cell">
				<div class="title"></div> 
				<div class="year"></div> 
				<div class="genre"></div> 
				<div class="rating"></div> 
			</div>
		</div>
	</div>
</div>

Result:


DEMO 2 - DEMO 1 but with an external template

This shows how to use stock jquery functionality to acquire a template on the fly for use with DEMO 1. This demo only shows the jQTemplate cal and the contents of the 'demo3-template.html' template filel.
jQTemplate call:

var movies = [
		{title:'The Last Picture Show', year:'1971', genre:'Drama', rating:'8.1/10'},
		{title:'The Dark Knight', year:'2008', genre:'Action', rating:'8.9/10'},
		{title:'Pulp Fiction', year:'1994', genre:'Drama', rating:'8.9/10'},
		{title:'Raiders of the Lost Ark', year:'1981', genre:'Action', rating:'8.7/10'},
		{title:'Aliens', year:'1986', genre:'Sci-Fi', rating:'8.5/10'}
	];
$.get('demo3-template.html', function (template) {
	$('#blockResult').jQTemplate(movies, {}, template);
});

'demo3-template.html' file contents:

<div class="movieTemplate">
	<div class="header">
		<div class="title">Title</div>
		<div class="year">Release Year</div>
		<div class="genre">Genre</div>
		<div class="rating">Rating</div>
	</div>
	<div class="itr">
		<div class="cell">
			<div class="title"></div> 
			<div class="year"></div> 
			<div class="genre"></div> 
			<div class="rating"></div> 
		</div>
	</div>
</div>

DEMO 3 - nested table template in another table template using simple modifier

This is an example showing how to nest a jQTemplate table template in another jQTemplate table template. The example is a table of products per product type. This shows how to use the modifier object to alter the presentation of the price field for each product per product type.
jQTemplate call:

// render top level template
var products = [{ 
			type:'software', products:[ {descrip: 'Abobe Photoshop CS4 Professional', price:2099}, {descrip: 'Autodesk AutoCAD LT', price:800} ] }, {	
			type:'hardware', products:[ {descrip: 'Samsung 1TB 7200RPM SATA Hard Drive', price:250}, {descrip: 'Seagate 750GB 7200RPM SATA Hard Drive', price:189} ]
		}];
$('#result').jQTemplate(products, {}, '.templates .productTypes')
	// render render next level nested template
	.find('.product').each(function (productsIndex) {
		var productsByType = products[productsIndex].products;
		$(this).jQTemplate(productsByType, {
				'price': function (index) {
						return '$' + productsByType[index].price.toFixed(2);
					}
			}, '.templates .productsByType')
	});

Template HTML:

<div class="templates" style="display:none;">
	<!-- top level table template -->
	<table class="productTypes">
		<tbody>
			<tr>
				<td class="type"></td> 
				<td class="product"></td> 
			</tr>
		</tbody>
	</table>
	<!-- nested table template -->
	<table class="productsByType">
		<thead>
			<tr>
				<th>Description</th>
				<th>Price</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="descrip"></td> 
				<td class="price"></td> 
			</tr>
		</tbody>
	</table>
</div>

Result: