JSFiddle - React, Tailwind, and code Playground

by fergal_doyle

HTML

<script src="//raw.github.com/olado/doT/master/doT.min.js"></script>
<div id="template" style="display:none">
  
{{ function buildList(a) { }}
      
    {{?a.length}}
    <ul>
        {{~a :v}}
        <li>
            {{=v.name}}
            {{ buildList(v.children); }}
        </li>
        {{~}}
    </ul>
    {{?}}

{{ } }}

{{ buildList( it.list ); }}

    
</div>

<div id="out"></div>

JavaScript

/** doT.js recursive function **/
var template = $("#template").html();
var data = {
   list:[
      {
         name:"1",
         children:[
            {
               name:"1.1",
               children:[]
            },
            {
               name:"1.2",
               children:[
                  {
                     name:"1.2.1",
                     children:[]
                  }
               ]
            }
         ]
      },
      {
         name:"2",
         children:[
            {
               name:"2.1",
               children:[
                  {
                     name:"2.1.1",
                     children:[]
                  },           
                  {
                     name:"2.1.2",
                     children:[]
                  },               
                  {
                     name:"2.1.3",
                     children:[]
                  }
               ]
            },
            {
               name:"2.2",
               children:[]
            },
            {
               name:"2.3",
               children:[]
            }
         ]
      },
      {
         name:"3",
         children:[
            {
               name:"3.1",
               children:[]
            }
         ]
      }
   ]
}

var linkList = doT.template(template);

console.log(doT);
console.log(linkList(data));
$("#out").html(linkList(data));