JSFiddle - React, Tailwind, and code Playground

by dru_zod

HTML

<div>
    <input type="text" data-bind="value: firstName" />
    <input type="text" data-bind="value: lastName" />
</div>
<div>
    first name: <span data-bind="text: firstName"></span><br />
    last name: <span data-bind="text: lastName"></span>
</div>
<div>
    full name: <span data-bind="text: fullName"></span>
</div>

JavaScript

var person = {
    firstName: ko.observable(''),
    lastName: ko.observable('')
};

person.fullName = ko.computed(function () {
    if (this.firstName()) {
        return this.firstName() + ' ' + this.lastName();
    }
    return '';
}, person);

ko.applyBindings(person);