beebole/gist:09f33882cce942943157

## gistfile1.html
<!DOCTYPE html>
<html>
<head>
  <title>PURE Unobtrusive Rendering Engine</title>
  <script src="http://pure.github.io/pure/libs/pure.js"></script>
</head>
<body>
  <ul class="treeItem">
    <li>
      <a class="name" href="javascript:void(0)">name</a>
      <div class="children"></div>
    </li>
  </ul>
  <script>
    var data = {children: [{name: 'Europe',children: [{name: 'Belgium',children: [{name: 'Brussels',children:null},{name: 'Namur'},{name: 'Antwerpen'}]},{name: 'Germany'},{name: 'UK'}]},{name: 'America',children: [{name: 'US',children: [{name: 'Alabama'},{name: 'Georgia'}]},{name: 'Canada'},{name: 'Argentina'}]},{name: 'Asia'},{name: 'Africa'},{name: 'Antarctica'}]},

    	directive = {
        'li': {
          'child <- children': {
            'a': 'child.name',
            'a@onclick':'alert(\'#{child.name}\');',
            'div.children': function(ctxt){
              //here is where the recursion happens, calling the compiled function in itself by a closure
              return ctxt.child.item.children ? rfn(ctxt.child.item):'';
            }
          }
        }
      },

      rfn = $p('ul').compile( directive );

    $p('ul').render( data, rfn );

  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>PURE Unobtrusive Rendering Engine</title>
	<script src="http://pure.github.io/pure/libs/pure.js"></script>
	</head>
	<body>
	<ul class="treeItem">
	<li>
	<a class="name" href="javascript:void(0)">name</a>
	<div class="children"></div>
	</li>
	</ul>
	<script>
	var data = {children: [{name: 'Europe',children: [{name: 'Belgium',children: [{name: 'Brussels',children:null},{name: 'Namur'},{name: 'Antwerpen'}]},{name: 'Germany'},{name: 'UK'}]},{name: 'America',children: [{name: 'US',children: [{name: 'Alabama'},{name: 'Georgia'}]},{name: 'Canada'},{name: 'Argentina'}]},{name: 'Asia'},{name: 'Africa'},{name: 'Antarctica'}]},

	directive = {
	'li': {
	'child <- children': {
	'a': 'child.name',
	'a@onclick':'alert(\'#{child.name}\');',
	'div.children': function(ctxt){
	//here is where the recursion happens, calling the compiled function in itself by a closure
	return ctxt.child.item.children ? rfn(ctxt.child.item):'';
	}
	}
	}
	},

	rfn = $p('ul').compile( directive );

	$p('ul').render( data, rfn );

	</script>
	</body>
	</html>