JSFiddle - React, Tailwind, and code Playground

by photo_tom

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-1.3.0beta.js"></script>
<div data-bind="with: person">
    <h3>Person</h3>
    <p>First name: <input data-bind="value: firstName" /></p>
    <p>Last name: <input data-bind="value: lastName" /></p>    
</div>

<div data-bind="with: weather, afterRender: 'afterRenderFixup1' ">
    <h3>Weather</h3>
    <table>
        <thead><tr><th>City name</th><th>Temperature</th></tr></thead>
        <tbody data-bind="foreach: cities, afterRender:'afterRenderFixup '">
            <tr>
                <td data-bind="text: city"></td>
                <td data-bind="text: temperature"></td>                
            </tr>
        </tbody>
    </table>
    <button data-bind="click: addItem">Add city</button>
</div>

CSS

body { font-family: Arial, Helvetica; margin: 5px; }
h3 { margin-top: 0 }

JavaScript

function personModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");
}

function weatherModel() {
    this.cities = ko.observableArray([
        {
        city: "London",
        temperature: 22},
    {
        city: "Paris",
        temperature: 26}
    ]);

    this.addItem = function() {
        this.cities.push({
            city: "New city",
            temperature: "Something"
        })
    }
}

function appViewModel() {
    this.person = new personModel();
    this.weather = new weatherModel();
};

afterRenderFixup = function(element) {
    // checkIndex is a HACK!!!!!!
    // it has to be this way because FF and IE use different index numbers.
    var checkIndex = $.browser.msie ? 0 : 1;
    var i2 = ko.contextFor(element[checkIndex]);
    var i3 = i2.$parent.currentRowNumber + 1;
    i2.$parent.currentRowNumber = i3;
    i3 = i3 % 2;
    if (1 === i3) $(element[checkIndex]).addClass('odd');
}
ko.applyBindings(new appViewModel());