JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="https://github.com/tjerabek/KnockoutInit/blob/master/KnockoutInit/knockoutinit.js"></script>
<h2>
    Index</h2>
<table data-bind="foreach: tasks" data-rebind="initial: initTasks">
    <!-- Model for Knockout -->
    <tr class="knockout">
        <td>
            <span data-bind="text: Name"></span>
        </td>
        <td>
            <span data-bind="text: IsDone"></span>
        </td>
        <td>
            <input type="checkbox" data-bind="checked: IsDone" />
        </td>
    </tr>
    
    <!-- Data loaded from request -->
    
    <tr data-rebind="item({ Name: 'Task0', IsDone: o(true) })">
        <td>
            <span>Task0</span> 
        </td>
        <td>
            <span>true</span>
        </td>
        <td>
            <input type="checkbox" value="" />
        </td>
    </tr>
    <tr data-rebind="item({ Name: 'Task1', IsDone: o(false) })">
        <td>
            <span>Task1</span> 
        </td>
        <td>
            <span>false</span>
        </td>
        <td>
            <input type="checkbox" value="" />
        </td>
    </tr>
    <tr data-rebind="item({ Name: 'Task2', IsDone: o(true) })">
        <td>
            <span>Task2</span>
        </td>
        <td>
            <span>true</span>
        </td>
        <td>
            <input type="checkbox" value="" checked="checked" />
        </td>
    </tr>
</table>
<a href="#" data-bind="click: addNew">Add new</a>

JavaScript

function AppViewModel() {
    self = this;
    
    self.tasks = ko.observableArray(initTasks);

    self.addNew = function () {
        self.tasks.push({ Name: "New task", IsDone: ko.observable(false) });
    }
}

var viewModel = new AppViewModel();

ko.applyBindings(viewModel);