JSFiddle - React, Tailwind, and code Playground

by RoryOSiochain

HTML

<script src="https://raw.github.com/pure/pure/master/libs/pure.js"></script>
<body>
    <ol class="treeItem">
        <li> <a class="name" href="javascript:void(0)">name</a>

            <div class="children"></div>
        </li>
    </ol>
</body>

JavaScript

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'
       }]
   };

   var directive = {
       'li': {
           'child <- children': {
               'a': 'child.name',
                   'a@onclick': 'alert(\'#{child.name}\');',
                   'div.children': function (ctxt) {
                   return ctxt.child.item.children ? rfn(ctxt.child.item) : '';
               }
           }
       }
   };

   var rfn = $('ol').compile(directive);
   $('ol').render(data, rfn);