JSFiddle - React, Tailwind, and code Playground

by sohimohit

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
   <button class="button addNewButton" data-bind="click: $root.addRate">Add a new Rate for Loan</button>
    <hr />
<table class="fruitGrid">
        <thead>
            <tr>
                <th class="headRow headColumn">
                    Name
                </th>
                <th class="headRow headColumn">
                    rate
                </th>
                <th class="headRow tools">
                </th>
            </tr>
        </thead>
        <tbody data-bind="foreach: Loans">
            <tr class="row">
                <td class="rowItem">
                    <input type="text" class="edit" data-bind="value: loanterm, visible: $root.isItemEditing($data)"  />
                    <label class="read" data-bind="text: loanterm, visible: !$root.isItemEditing($data)" />
                </td>
				 <td class="rowItem">
                    <input type="text" class="edit" data-bind="value: rate, visible: $root.isItemEditing($data)"  />
                    <label class="read" data-bind="text: rate, visible: !$root.isItemEditing($data)" />
                </td>
				 <td class="rowItem">
                    <input type="text" class="edit" data-bind="value: simplerate, visible: $root.isItemEditing($data)"  />
                    <label class="read" data-bind="text: simplerate, visible: !$root.isItemEditing($data)" />
                </td>
				<td class="rowItem">
                    <input type="text" class="edit" data-bind="value: compoundrate, visible: $root.isItemEditing($data)"  />
                    <label class="read" data-bind="text: compoundrate, visible: !$root.isItemEditing($data)" />
                </td>
				<td class="rowItem">
                    <input type="text" class="edit" data-bind="value: bothrate, visible: $root.isItemEditing($data)"  />
                    <label class="read" data-bind="text: bothrate, visible:...

JavaScript

ko.observable.fn.beginEdit = function (transaction) {
    
    var self = this;
    var commitSubscription, 
        rollbackSubscription;
    
    // get the current value and store it for editing
    if (self.slice)
        self.editValue = ko.observableArray(self.slice());
    else
        self.editValue = ko.observable(self());
        
    self.dispose = function () {        
        // kill this subscriptions
        commitSubscription.dispose();
        rollbackSubscription.dispose(); 
    };
    
    self.commit = function () {
        // update the actual value with the edit value
        self(self.editValue());
        
        // dispose the subscriptions
        self.dispose();
    };
        
    self.rollback = function () {
        // rollback the edit value
        self.editValue(self());
        
        // dispose the subscriptions
        self.dispose();
    };
    
    //  subscribe to the transation commit and reject calls
    commitSubscription = transaction.subscribe(self.commit,
                                                self,
                                                "commit");
    
    rollbackSubscription = transaction.subscribe(self.rollback,
                                                    self,
                                                    "rollback");
    
    return self;
}

/*----------------------------------------------------------------------*/
/* Item Model
/*----------------------------------------------------------------------*/
var dummyData = [{"rate":"1","loanterm":"us","simplerate":"simplerate","compoundrate":"compoundrate","bothrate":"bothrate"},{"rate":"2","loanterm":"europe","simplerate":"simplerate","compoundrate":"compoundrate","bothrate":"bothrate"},{"rate":"3","loanterm":"aus","simplerate":"simplerate","compoundrate":"compoundrate","bothrate":"bothrate"}];
function Loan(data) {
    var self = this;
    self.loanterm = ko.observable(data.loanterm || "");
    self.rate = ko.observable(data.rate...