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" data-bind="jqComboTree:{lines:true}, jqComboTreeSource: items, jqComboTreeValue: selectedId"></select>

<label data-bind="text: selectedId()"/>

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 $.evalJSON(data.json);
//}

var ViewModel = function() {
    var self = this;
    self.initialized = ko.observable(false);
    self.items = ko.observableArray();
    self.selectedId = ko.observable();
        
    // 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);
                   self.initialized(true);
                 }
               });
     })();

    function getData() {
        return self.items();
    }        


};


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

//jqComboTree -- main binding (should contain additional options to pass to combotree)
//jqComboTreeSource -- the array of choices
//jqComboTreeValue -- where to write the selected value
ko.bindingHandlers.jqComboTree = {
    init: function(element, valueAccessor,...