JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/js/knockout-2.0.0.js"></script>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
Show first name: <input type="checkbox" data-bind="checked: condition" />
<h2>Hello, <span data-bind="text: fullName"> </span></h2>

JavaScript

// Here's my data model
var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);
    this.condition = ko.observable(false);
 
    // at the point of evaluation of this computed observabled, 'condition'
    // will be false, yet the dependecy to both firstName and lastName is
    // identified
    this.fullName = ko.computed(function() {
        return this.condition() ? this.firstName() : this.lastName();
    }, this);
};
 
ko.applyBindings(new ViewModel("Planet", "Earth"));