JSFiddle - React, Tailwind, and code Playground

by vivaxy

HTML

<p>Name: <b data-bind="visible: !editing(), text: name, click: edit">&nbsp;</b>

    <input data-bind="visible: editing, value: name, hasFocus: editing" />
</p>
<p><em>Click the name to edit it; click elsewhere to apply changes.</em>
</p>

JavaScript

function PersonViewModel(name) {
    // Data
    this.name = ko.observable(name);
    this.editing = ko.observable(false);

    // Behaviors
    this.edit = function () {
        this.editing(true)
    }
}

ko.applyBindings(new PersonViewModel("Bert Bertington"));