JSFiddle - React, Tailwind, and code Playground

by Wentz Wu

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
<input data-bind="value: firstName"/>
<input data-bind="value: lastName"/>
<input data-bind="value: fullName"/>
<div id="console"></div>

JavaScript

function viewModel() {
    this.firstName = ko.observable("bruce").extend({
        log: "hello"
    });
    this.lastName = ko.observable("wu");
    this.fullName = ko.computed({
        read: function() {
            return this.firstName() + " " + this.lastName()
        },
        write: function(value) {
            var lastSpacePos = value.lastIndexOf(" ");
            if (lastSpacePos > 0) {
                this.firstName(value.substring(0, lastSpacePos));
                this.lastName(value.substring(lastSpacePos + 1));
            }
        },
        owner: this
    });
}
ko.extenders.log = function(target, options) {
    target.subscribe(function(newValue) {
        console.log(option + ": " + newValue);
    });
    return target;
};
ko.applyBindings(new viewModel());