JSFiddle - React, Tailwind, and code Playground

by paulbau

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.2.0.js"></script>
<title>Knockout Test</title>
<form data-bind="submit: addLocation">
<table>
    <thead>
        <tr>
            <th>Code</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input data-bind="value: newId" placeholder="Enter code"></input></td>
            <td><input data-bind="value: newName" placeholder="Enter name"></input></td>
            <td><button type="submit">Add</button></td>
        </tr>
        <!-- ko foreach: locations -->
        <tr>
            <td data-bind="text: id"></td>
            <td data-bind="text: name"></td>
        </tr>
        <!-- /ko -->
    </tbody>
</table>
</form>

CSS

th { 
    text-align: left;
}

JavaScript

function Location(data) {
    this.id = data.id;
    this.name = data.name;
};

function LocationsViewModel() {
    var self = this;
    
    self.locations = ko.observableArray([
        new Location({ id: 1, name: "Deli"}), 
        new Location({ id: 2, name: "Meat"})
    ]);
    
    self.newId = ko.observable();
    self.newName = ko.observable();
    
    // operations
    self.addLocation = function() {
        self.locations.push(new Location({ id: this.newId(), name: this.newName()}));
    };
    
};
                                          
ko.applyBindings(new LocationsViewModel());