JSFiddle - React, Tailwind, and code Playground

by xdenser

HTML

<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.js"></script>
<script id='treeNode' type='text/html'>
  <li> 
    <span data-bind='text:caption'></span> 
    <ul data-bind='template: {name:"treeNode", foreach: nodes}'>
      
    </ul> 
  </li>  
 </script>

<div  data-bind='with: tree'>
    <ul data-bind='template: {name:"treeNode", foreach: nodes}'>
      
    </ul> 
</div>

JavaScript

function TreeViewNode(){
  this.caption = ko.observable();
  this.nodes = ko.observableArray([]);
}

function TreeView(){
  this.nodes = ko.observableArray([]);
}

vm = {
  tree: new TreeView()
}

var node = new TreeViewNode();
node.caption('node 1');
vm.tree.nodes([node]);

ko.applyBindings(vm);