CURRENT PROJECTS
loading
CATEGORIES AND POSTS
loading
overset
DEVELOPMENT LOG FOR JIM PALMER
Posted 06/28/2009 in jquery


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
BASIC USAGE
$(target).jQTemplate(data<object || array>, modifier<object>, template<string || selector>);
data type: object {}, or array []
Contains the data used to fill the template with. This can be simple or complex objects or arrays of objects.

modifier type: object {} with specific selectors
This contains the specific keys in the data object that you want to modify on the fly during rendering to change the data that will actually be rendered. For example, if you have a price in your data object that you want to round or modify while processing the template you can use the modifier to do so.

template type: string ''
This is the actual HTML string of the template. This can also be a jquery selector to acquire the innerHTML from to be used as the template.


DEMOS
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:
comments
loading
new comment
NAME
EMAIL ME ON UPDATES
EMAIL (hidden)
URL
MESSAGE TAGS ALLOWED: <code> <a> <pre class="code [tab4|tabX|inline|bash]"> <br>
PREVIEW COMMENT
TURING TEST
gravatar