JSFiddle - React, Tailwind, and code Playground

by nair

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<div class="tableclass" data-bind="visible: tableVisible">
<table>
   <thead>
       <tr>
           <th>first name</th>
           <th>last name</th>
           <th></th>
           <th></th>    
       </tr>
    </thead>
       <tbody data-bind="foreach: people">
           <tr>
               <td data-bind="text: firstname"></td>
               <td data-bind="text: lastname"></td>
               <td><a href="#" data-bind="click: $parent.editPerson">edit</a></td>
               <td><a href="#" data-bind="click: $parent.removePerson">delete</a></td>
           </tr>
       </tbody>
</table>
</div>
<div data-bind="visible: dataentryVisible, template: {name: 'entrytemplate', data: selecteditem}">
</div>
<script type="text/html" id="entrytemplate">
    <form>
        <fieldset>
            <div>
                <label>first name</label>
                <input data-bind="value: firstname"></input>
            </div>
            <div>
                <label>lasst name</label>
                <input data-bind="value: lastname"></input>
            </div>
        </fieldset>
        <div>
            <a href="#" data-bind="click:savechanges">Save</a>
        </div>
    </form>
</script>

JavaScript

function model(firstname, lastname) {
    var self = this;
    self.firstname = ko.observable(firstname);
    self.lastname = ko.observable(lastname);
}

function viewModel() {
    var self = this;
    self.tableVisible = ko.observable(true);
    self.dataentryVisible = ko.observable(false);
    self.selecteditem = ko.observable([]);
    
    self.people = ko.observableArray([
        new model("first", "name"), new model("second", "name")]);
    
    self.editPerson= function(){
        self.dataentryVisible(true);
        self.tableVisible(false);
        self.selecteditem(this);
    };
    
    self.removePerson = function() {
        self.people.remove(this);
    };
}

ko.applyBindings(new viewModel());