JSFiddle - React, Tailwind, and code Playground

by Zholen

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.web.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="https://raw.github.com/rniemeyer/knockout-kendo/master/build/knockout-kendo.js"></script>
<ul id="Tabs" data-bind="foreach:Tabs">
    <li class="k-button" data-bind="click: $parent.SetSelectedTab">
        <span>
            <label data-bind="text: title"></label> 
        </span>
    </li>
</ul>

<!-- ko if:SelectedTab -->
<!-- ko if:SelectedTab().windows().length > 0 -->
<!-- ko foreach:{data:SelectedTab().windows} -->
<div data-bind="customWindow: $data">Loading...</div>
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->

JavaScript

var viewModel = function() {
     var tabs = ko.observableArray([
         {title: "Tab 1", windows: ko.observableArray([
             {title: "1", width:500, height:500, top: 300, left:100},
             {title: "2"}
         ])},
         {title: "Tab 2", windows: ko.observableArray([
             {title: "3"},
             {title: "4"}
         ])}
     ]),
     selectedTab = ko.observable(),
     setSelectedTab = function(data, e) {
         
         $('.k-window .k-content').each(function() {
                $(this).data('kendoWindow').close();
         });
         
         selectedTab(data);  
     };
    
    return {
        Tabs: tabs,
        SelectedTab: selectedTab,
        SetSelectedTab: setSelectedTab
    }
};

ko.bindingHandlers.customWindow = {
    init: function (element, valueAccessor, allBindingAccessor, viewModel, bindingContext) {
            var value = valueAccessor(), 
                item = ko.utils.unwrapObservable(value),
                wndw, 
                wrapper;

            wndw = $(element).kendoWindow({
                width: item.width,
                height: item.height,
                actions: ['Minimize', 'Maximize', 'Close'],
                title: item.title,
                deactivate: function () {
                    this.destroy();
                },
                visible:false
            }).data('kendoWindow');
        
        wrapper = $(wndw.wrapper);
        wrapper.css({ top: item.top, left: item.left });
        wndw.open();
    }
}



ko.applyBindings(viewModel());