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">
  
{{##def.ul:a:
    <ul>
    {{~a :value}}
        <li>{{=value.name}}{{#def.ul:value.children}}</li>
    {{~}}
    </ul>
#}}
    
{{#def.ul:it.list}}
    
</div>

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

JavaScript

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(data)
$("#out").html(linkList(data));