example.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>jSmart example</title>
	<script type="text/javascript" src="smart.min.js"></script>
</head>
<body>

<script id="test_tpl" type="text/x-jsmart-tmpl"> 
   <h1>{$greeting}</h1>

   {foreach $books as $i => $book}
      <div style="background-color: {cycle values="cyan,yellow"};">
         [{$i+1}] {$book.title|upper} by {$book.author} 
            {if $book.price}                                
               Price: <span style="color:red">${$book.price}</span>
            {/if}                                           
      </div>
   {foreachelse}
      No books
   {/foreach}

   Total: {$book@total}
</script>

<script type="text/javascript">
   var data = {
       greeting: 'Hi, there are some JScript books you may find interesting:',
	   books: [
		  {
			 title  : 'JavaScript: The Definitive Guide',          
			 author : 'David Flanagan',                            
			 price  : '31.18'
		  },
		  {
			 title  : 'Murach JavaScript and DOM Scripting',
			 author : 'Ray Harris'
		  },
		  {
			 title  : 'Head First JavaScript',
			 author : 'Michael Morrison',
			 price  : '29.54'
		  }
		]      
	};

	var tpl = new jSmart(document.getElementById('test_tpl').innerHTML);
	var res = tpl.fetch(data);
	document.write( res );
</script>


</body>
</html>