JSFiddle - React, Tailwind, and code Playground

by Farzad Cyrus

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="http://coderenaissance.github.com/knockout.viewmodel/knockout.viewmodel.min.js"></script>
<div id="wrapper">
    	<h1>Table Test</h1>

    <table class="displayTable">
        <thead>
            <tr data-bind="foreach: headings">
                <th data-bind="text: $data.CC_FIELD_LABEL"></th>
            </tr>
        </thead>
        <tbody data-bind="foreach: listings">
            <tr data-bind="foreach: $data.LISTING">
                <td data-bind="text: $data.VALUE"></td>
            </tr>
        </tbody>
    </table>
    <hr />
    <table class="editTable">
        <thead>
            <tr data-bind="foreach: headings">
                <th data-bind="text: $data.CC_FIELD_LABEL"></th>
            </tr>
        </thead>
        <tbody data-bind="foreach: listings">
            <tr data-bind="foreach: $data.LISTING">
                <td>
                    <input data-bind="value: $data.VALUE" />
                </td>
            </tr>
        </tbody>
    </table>
    <hr />
</div>

JavaScript

//Represents the title of a data grouping
var Heading = function () {}

//Represents the data values for a data set
var Listing = function () {}


//The KO class used to create an editable Table with dynamic observables
var EditableTableVM = function () {
    this.init();
    this.load();
}

//Initializes variables
EditableTableVM.prototype.init = function () {
    this.dataRepo = this.getData();
}

//Loads data
EditableTableVM.prototype.load = function () {
    this.headings = ko.viewmodel.fromModel(this.dataRepo.HEADINGS);
    this.listings = ko.viewmodel.fromModel(this.dataRepo.LISTINGS);
}

//Requests Data from repo
EditableTableVM.prototype.getData = function () {
    // TEST DATA
    var jsonTEST =...