JSFiddle - React, Tailwind, and code Playground

by bmccord

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<link rel="stylesheet" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script src="http://jquery-json.googlecode.com/files/jquery.json-2.3.min.js"></script>
<select id="basicTree" class="easyui-combotree" data-options="lines:true"></select>

JavaScript

var data = {json: $.toJSON([{
    "id":1,
    "text":"Folder1",
    "iconCls":"icon-ok",
    "children":[{
        "id":2,
        "text":"File1",
        "checked":true
    },{
        "id":3,
        "text":"Folder2",
        "state":"open",
        "children":[{
            "id":4,
            "text":"File2",
            "attributes":{
                "p1":"value1",
                "p2":"value2"
            },
            "checked":true,
            "iconCls":"icon-reload"
        },{
            "id": 8,
            "text":"Folder3",
            "state":"closed",
            "children":[{
                "id":9,
                "text":"File31"
            },{
                "id":10,
                "text":"File32"
            }]
        }]
    }]
},{
    "text":"Languages",
    "state":"closed",
    "children":[{
        "id":"j1",
        "text":"Java"
    },{
        "id":"j2",
        "text":"C#"
    }]
}]), delay:1};

function getData() {
    return data;
}

var ViewModel = function() {
    var self = this;
    self.initialized = ko.observable(false);
    self.items = ko.observableArray();
        
    // Use JSFiddle echo to simulate an AJAX service
    (function() {
        $.ajax({ url:"/echo/json/", data:data.json, type:"POST",
                 success:function(data)
                 {
                   // Map the returned JSON to the View Model  
                   ko.mapping.fromJS(data, {}, self.items);
                   self.initialized(true);
                     console.log(data);

                 }
               });
     })();  


};


//$('#basicTree').combotree('loadData', data);


var vm = new ViewModel();
ko.applyBindings(vm);
console.log(vm.initialized());

$('#basicTree').combotree( {data: getData(), onSelect: function(node) {console.log(node);}});