JSFiddle - React, Tailwind, and code Playground

by xdenser

HTML

<script src="https://github.com/xdenser/knockout-component/raw/master/knockout.component.js"></script>
<label>Label: </label>
<!-- ko if: editing -->
<input type='text' data-bind='value: _value'> 
<button data-bind='click:doSave'>Save</button>
<button data-bind='click:doCancel'>Cancel</button>
<!-- /ko -->
<!-- ko ifnot: editing -->
<span type='text' data-bind='text: value'></span> 
<a href='void:' data-bind='click:doEdit' style='font-size: 0.8em'>edit</a>
<!-- /ko -->

CSS

label { font-weight:bold; }

JavaScript

var
vm = {
    value: ko.observable('Value'),
    _value: ko.observable(),
    editing: ko.observable(false)
};

vm.doSave = function() {
    vm.value(vm._value());
    vm.editing(false);
}
vm.doCancel = function() {
    vm.editing(false);
}
vm.doEdit = function() {
    vm._value(vm.value());
    vm.editing(true);
}

ko.applyBindings(vm);