JSFiddle - React, Tailwind, and code Playground

by lazyberezovsky

HTML

<p>
    First Name: 
    <b data-bind="visible: !firstNameEditing(), text: firstName, click: editFirstName">&nbsp;</b>
    <input data-bind="visible: firstNameEditing, value: firstName, hasfocus: firstNameEditing" />
</p>
<p>
    Last Name: 
    <b data-bind="visible: !lastNameEditing(), text: lastName, click: editLastName">&nbsp;</b>
    <input data-bind="visible: lastNameEditing, value: lastName, hasfocus: lastNameEditing" />
</p>
<p><em>Click the name to edit it; click elsewhere to apply changes.</em></p>

JavaScript

function PersonViewModel(firstName, lastName) {
    // Data
    this.firstName = ko.observable(firstName);
    this.lastName = ko.observable(lastName);
    this.firstNameEditing = ko.observable(false);
    this.lastNameEditing = ko.observable(false);
         
    // Behaviors
    this.editFirstName = function() { this.firstNameEditing(true) }
    this.editLastName = function() { this.lastNameEditing(true) }
}
 
ko.applyBindings(new PersonViewModel("Uncle", "Bob"));