v3_preview/pure3.html

<html>
<head>
  <title>PURE Unobtrusive Rendering Engine</title>
  <script src="pure3.js"></script>
</head>
<body>
  <!-- HTML template -->
	It took:<span id="duration"></span>
  <ul class="template">
    <li class="people">
		<span class="name"></span>
    	<ul>
	    <li class="team">
			<a class="name"></a>
	    </li>
	  </ul>
    </li>
  </ul>

  <script>
	function callback(data){
	    var start = new Date().getTime();

	    //declaration of the actions PURE has to do
	   var directive = {
			'li.people':{
				'person<-people':{
					'span.name':'person.name',
					'li.team':{
						'teamMember<-person.team':{
							'a.name':'teamMember.name',
							'a.name@href+':'teamMember.id'
						}
					}
				}
			}
	   };

	    // note the use of render instead of autoRender
	   $p('ul.template').noClone().render(data, directive);
		document.getElementById('duration').innerHTML = (new Date().getTime() - start) + 'ms for ' + data.people.length + ' records';
	}
</script>
<script src="data.js"></script>
</body>
</html>