Call your template recursively

Compiled templates can be included within each other.
This example show a specific example when the template is calling itself, triggering a recursion.

The HTML:

<ul class="treeItem">
  <li class="children"><a class="name" href="#">name</a></li>
</ul>

The JSON data:

var context = {
  children: [{
  name:'Europe',
    children:[{
      name:'Belgium', 
      children:[{
         name:'Brussels'},{
         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:'Antartica'}]};

The Javascript to do this action (here with jQuery):

var directive = {
  'li+':function(arg){
    if(arg.item.children){
      return $p.compiledFunctions.tree.compiled(arg.item);}}};


$('ul.treeItem').compile('tree', directive, context);
$('ul.treeItem').render(context, 'tree');

Note:

Each time an html is compiled, it is stored at $p.compiledFunctions[templateName].compiled