JSFiddle - React, Tailwind, and code Playground

by bcaswell

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<script src="http://localhost:50245/lib/js/xhr.paysheet.js"></script>
<div id="grid"></div>
<div class="view">
    <label>First Name:
        <input data-bind="value: firstName" />
    </label>
    <label>Last Name:
        <input data-bind="value: lastName" />
    </label>
</div>
<div class="view">
    <label>First Name:
        <input data-bind="value: firstName" />
    </label>
    <label>Last Name:
        <input data-bind="value: lastName" />
    </label>
</div>
<div class="view">
    <button data-bind="click: displayGreeting">Display Greeting</button>
</div>
<div class="view">
    <button data-bind="click: changeName">Change Name</button>
    <button data-bind="click: testXHRPost">Test</button>
</div>

JavaScript

// Grid $("#grid").kendoGrid({});

// View-Model
var viewModel = kendo.observable({
    firstName: "John",
    lastName: "Doe",
    displayGreeting: function () {
        // Get the current values of "firstName" and "lastName"
        var firstName = this.get("firstName");
        var lastName = this.get("lastName");
        $("#grid").html("Hello, " + firstName + " " + lastName + "!!!");
    },
    changeName: function () {
        this.set("firstName", "Brett");
        this.set("lastName", "Caswell");
    },
    testXHRPost: function () {
        var result = Paysheet.XHR.POST("http://localhost:50245/handler.paysheet.ashx", {
            "firstName" : this.get("firstName")
        });
    }
});

// the View to the View-Model
kendo.bind($(".view"), viewModel);