JSFiddle - React, Tailwind, and code Playground

by mgrcic

HTML

<script src="http://knockoutjs.com/js/knockout-2.1.0.js"></script>
<h2>People</h2>

<table>
    <thead>
        <tr><th>Index</th><th>Name</th><th></th></tr>
    </thead>
    <tbody data-bind="foreach: people">
        <td data-bind="text: $index"></td> <!-- Look, here we use $index -->
        <td data-bind="text: name"></td>
        <td><a href="#" data-bind="click: $parent.removePerson">Remove</a></td>                
    </tbody>
</table>
        
<button data-bind="click: addPerson">Add</button>

<p><em>Note: Switch to the "HTML" or "JavaScript" tab to see the code</em></p>

JavaScript

function AppViewModel() {
    var self = this;
 
    self.people = ko.observableArray([
        { name: 'Bert' },
        { name: 'Charles' },
        { name: 'Denise' }
    ]);
 
    self.addPerson = function() {
        self.people.push({ name: "New at " + new Date().getSeconds() });
    };
 
    self.removePerson = function(person) {
        self.people.remove(person);
    }
}
 
ko.applyBindings(new AppViewModel());