jTemplates is a great lightweight template engine for jQuery and JavaScript. It allows you to process data (e.g. JSON data returned from an AJAX call) and feed it ito a template definition rather than manually building your html elements.
jTemplates supports foreach, for, if..elseif..else constructs in additional to parameters, nested templates etc.
The example below defines a template to display a list of orders and for each order the list of items that belong to that order. It shows how nested foreach can be used. The project documentation goes into more detail.
<!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>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-jtemplates0.7.8.js" type="text/javascript"></script>
<title>jTemplates Demo</title>
<script type="text/javascript" language="javascript">
// define some sample data orders
var sampleOrder1 = {
orderID: 'OR0001',
orderItems: [
{ product: 'Apple', quantity: 23 },
{ product: 'Kiwi', quantity: 13 },
{ product: 'Orange', quantity: 2 },
{ product: 'Mango', quantity: 99 }
]
}
var sampleOrder2 = {
orderID: 'OR0002',
orderItems: [
{ product: 'Pear', quantity: 2 },
{ product: 'Mango', quantity: 400 }
]
}
// define a list of (2) sample orders
var sampleOrdersList = {
orders : [sampleOrder1, sampleOrder2]
}
// When the DOM is ready apply the jTemplate
$(document).ready(function() {
// Tell jTemplates we want the div with the ID of renderedContentWillGoHere
// to be filled with the templated
$('#renderedContentWillGoHere').setTemplate($('#ordersListTemplateDefinition').html());
// Combine the data in sampleOrdersList with the templateand render
$('#renderedContentWillGoHere').processTemplate(sampleOrdersList.orders);
});
</script>
<script type="text/html" id="ordersListTemplateDefinition">
<!-- iterate over all the orders that were passed in as data
and as each order is processed we give it an alias of currentOrder -->
{#foreach $T as currentOrder}
<!-- Output the orderID for the currentOrder we are iterating -->
<h1> Order ID: {$T.currentOrder.orderID} </h1>
<!-- Now we have a nested loop where we output the orderItems for the currentOrder -->
<h4>Order Items</h4>
<ul>
{#foreach $T.currentOrder.orderItems as currentOrderItem}
<li>{$T.currentOrderItem.product} {$T.currentOrderItem.quantity}</li>
{#/for}
</ul>
{#/for}
</script>
</head>
<body>
<div id="renderedContentWillGoHere"></div>
</body>
</html>
SHARE: