JSFiddle - React, Tailwind, and code Playground

by siliconsoul

HTML

<link rel="stylesheet" href="//cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2013.3.1119/styles/kendo.blueopal.min.css">
<script src="//cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<!--2013.3.1119 - Doesn't Work-->
<button
    data-role="button"
    data-bind="events: { click: MakeItGo }">Make It Go</button>
<div
    data-bind="text: RootProperty">
</div>
<div data-role="tabstrip">
    <ul>
        <li class="k-state-active">First</li>
        <li>Second</li>
    </ul>
    <div>
        First
        <br />
        <span data-bind="text: FirstChildViewModel.Text">This should be replaced1</span>
    </div>
    <div>
        Second
        <br />
        <span data-bind="text: SecondChildViewModel.Text">This should be replaced2</span>
    </div>
</div>

JavaScript

var MainViewModel = kendo.data.ObservableObject.extend({
    init: function() {
        kendo.data.ObservableObject.fn.init.call(this, arguments);
        
        this.set("FirstChildViewModel", {});
        this.set("SecondChildViewModel", {});
    },
    
    MakeItGo: function () {
        console.log("I'm getting called.");
        
        this.set("RootProperty", "I'm the root.");
        this.set("FirstChildViewModel.Text", "First - " + new Date()); // Doesn't update the UI
        this.set("SecondChildViewModel.Text", "Second - " + new Date()); // Doesn't update the UI
    }
});

var viewModel = new MainViewModel();
kendo.bind($("body"), viewModel);