JSFiddle - React, Tailwind, and code Playground

by Girafa

HTML

<div id="names">
    <input type="text" data-bind="value: firstName"/>
    <input type="text" data-bind="value: lastName"/>
    <input type="text" data-bind="value: fullName"/>
</div>

JavaScript

var NamesCtrl = function(){
    var self = this;
    this.firstName = ko.observable('John');
    this.lastName = ko.observable('Smith');
    this.fullName = ko.computed({
        read: function(){
            return self.firstName() + ' ' + self.lastName();
        },
        write: function(newValue){
            var names = newValue.split(' ');
            self.firstName(names[0] || '');
            self.lastName(names[1] || '');
        }
    });
};
var container = document.getElementById('names');
ko.applyBindings(new NamesCtrl(), container);