v3_preview/pure2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<title>pure3</title>
	<script src="../libs/pure.js"></script>
</head>
<body>
	<div style="display:none">
		<div class="template">
			<a href="http://"></a>
			<span></span>
			<input type="button" />
			<ul>
				<li class="animal">
					<span class="name"></span>
					<ol>
						<li class="food"></li>
					</ol>
				</li>
			</ul>
		</div>
	</div>
	<div id="result"></div>
	<script>
		var data = {
				who:'wrrrld',
				id:'345',
				href:'beebole.com',
				site:'hello',
				animals:[
					{name:'cat', food:['mouse', 'meat']},
					{name:'mouse', food:['cheese', 'grains']} 
				]
			},
			directive = {
				'li.animal':{
					'animal<-animals':{
						'li.food':{
							'food<-animal.food':{
							}
						}
					}
				}
			}, rfn;
			rfn = $p('div.template').compile(directive); //!the compiled function returns a DOM node, not a string anymore
			document.getElementById('result').innerHTML = rfn(data);
	
	</script>

</body>
</html>