JSFiddle - React, Tailwind, and code Playground

by psteele

HTML

<table width="100%" border="1">
    <tbody data-bind="template: { name: templateSelector, foreach: items }">
    </tbody>
</table>
<div>
    <input type="button" data-bind="click: showJSON" value="Show" />
</div>
<script type="text/html" id="view-template">
    <tr>
        <td width="50%" data-bind="text: name, event: { dblclick: function() { $parent.editItem($data); }}" />
        <td width="50%" data-bind="text: age" />
    </tr>
</script>

<script type="text/html" id="edit-template">
    <tr>
        <td width="50%"><input type="text" data-bind="value: name, event: { blur: function() { $parent.disableAllEdit(); }}, hasFocus: editMode" /></td>
        <td width="50%" data-bind="text: age" />
    </tr>
</script>

CSS

tr {
    height: 30px;
}

JavaScript

var item = function (name, age) {
    this.name = ko.observable(name);
    this.age = ko.observable(age);
    this.editMode = ko.observable(false);
}

var vm = function(data) {
    var me = this;
    
    me.items = ko.observableArray(data);
    me.templateSelector = function(item) {
        if( item.editMode() )
            return 'edit-template';
        return 'view-template';
    }
    
    me.editItem = function(item) {
        me.disableAllEdit();
        item.editMode(true);
    };
    
    me.disableAllEdit = function() {
        var editItems = me.items();
        for(var i=0;i<editItems.length;i++)
            editItems[i].editMode(false);
    }
    
    me.showJSON = function() {
        alert(ko.toJSON(me));
    };
}

var viewmodel = new vm([ new item('patrick', 30), new item('cheri', 35), new item('cassandra', 10) ]);
ko.applyBindings(viewmodel);
//viewmodel.items()[1].editMode(true);