JSFiddle - React, Tailwind, and code Playground

by xdenser

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<div data-bind='with: tree'>
  <ul data-bind='template: {name:"treeNode", foreach: children}'>
  </ul>    
</div>  

<script id='treeNode' type='text/html'>
  <li> 
    <span data-bind='text:caption'></span>
    <ul data-bind='template: {name:"treeNode", foreach: children}'>
    </ul> 
  </li>  
 </script>

JavaScript

function TreeViewNode(caption,children){
  this.caption = caption;
  this.children = children;
}

function TreeView(children){
  this.children = children;
}

var vm = {
  tree: new TreeView([
     new TreeViewNode('Node 1',[
        new TreeViewNode('Node 3')
     ]),
     new TreeViewNode('Node 2')
  ])
};

ko.applyBindings(vm);