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">

    <ul >    
    {{~it.list :value}}
        <li>{{=value.name}}</li>        
    {{~}}
    </ul>    
    
</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));