JSFiddle - React, Tailwind, and code Playground

by Jan Föh

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
Name: <input type="text" data-bind="value: userInput, valueUpdate: 'input'" /><br />
Hometown: <input type="text" data-bind="value: Hometown, disable: Hometown.isServerSet" /><br />
NickName: <input type="text" data-bind="value: Address, disable: Address.isServerSet" />

JavaScript

ko.extenders.isServerSet = function (target, value) {
    target.isServerSet = ko.observable(value);
    return target;
};

function MyViewModel() {
    var self = this;
    self.userInput = ko.observable();
    self.Hometown = ko.observable().extend({
        isServerSet: false
    });;
    self.Address = ko.observable().extend({
        isServerSet: false
    });;
    self.userInput.subscribe(function () {
        readDatabase(self);
    });
}
ko.applyBindings(new MyViewModel());

function readDatabase(self) {
    if (self.userInput().substring(0, 1) == "a") {
        // don't overwrite user-provided values
        if (!self.Hometown()) {
            self.Hometown("A town");
            self.Hometown.isServerSet(true);
        }
        if (!self.Address()) {
            self.Address("A address");
            self.Address.isServerSet(true);
        }
    } else {
        self.Hometown("");
        self.Address("Other address");
    }
}