JSFiddle - React, Tailwind, and code Playground

by jearles

HTML

<script src="http://jquery-json.googlecode.com/files/jquery.json-2.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<!-- ko if: initialized -->
<button data-bind="click: addItem">Add</button>
<div >
  <ul data-bind="template: { name: 'itemTmpl', foreach: items }"></ul>
</div>
<!-- /ko -->

<!-- ko ifnot: initialized -->
<span>Loading...</span>
<!-- /ko -->

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

CSS

ul { 
  margin-left: 20px;
}

JavaScript

// Sample JSON to return for initialization; 2 second delay
var data = {
    json: $.toJSON([
            {"id":1,"name":"one","children":[
                {"id":2,"name":"two","children":[
                    {"id":3,"name":"three","children":[]},
                    {"id":4,"name":"four","children":[]}
                ]},
                {"id":5,"name":"five","children":[
                    {"id":6,"name":"six","children":[]},
                    {"id":7,"name":"seven","children":[]}                
                ]}            
            ]},
            {"id":8,"name":"eight","children":[
                {"id":9,"name":"nine","children":[
                    {"id":10,"name":"ten","children":[]},
                    {"id":11,"name":"eleven","children":[]}
                ]},
                {"id":12,"name":"twelve","children":[
                    {"id":13,"name":"thirteen","children":[]},
                    {"id":14,"name":"fourteen","children":[]}                
                ]}            
            ]},
            {"id":15,"name":"fifteen","children":[]}
            ]),
        delay: 1
}

var ViewModel = function() {
    var self = this;
    self.initialized = ko.observable(false);
    self.items = ko.observableArray();

    self.addLevel = 2;
    self.addItem = function() {
        var child = self.items()[0];
        for (i = 0; i < self.addLevel; i++) {
            child = child.children()[0];
        }
        child.children.push(
            {"id": 0,
             "name": ko.observable("new item"),
             "children": ko.observableArray()
            }
        );
        self.addLevel = self.addLevel + 1;
    };
        
    // Use JSFiddle echo to simulate an AJAX service
    (function() {
        $.ajax({ url:"/echo/json/", data:data, type:"POST",
                 success:function(data)
                 {
                   // Map the returned JSON to the View Model  
                   ko.mapping.fromJS(data, {}, self.items);
       ...