javascript - 仅在系统修改时禁用输入

Question

此代码进行搜索并显示结果。我想有条件地禁用inputs 我正在使用淘汰赛来控制何时input禁用。

要求：

1. input由系统设置时禁用。
2. 不应禁用用户输入。

在以下来自的代码输入中readDatabase()效果很好。如果用户输入家乡/昵称input，则选项卡然后input禁用。如何修复此代码以满足第二个要求？

更新

我不反对从 jQuery 获得一些帮助。我不想完全抛弃我的视图模型绑定。

小提琴

HTML

Name: <input type="text" data-bind="value: userInput, valueUpdate: 'input'" /><br />
Hometown: <input type="text" data-bind="value: Hometown, disable: Hometown" /><br />
NickName: <input type="text" data-bind="value: Address, disable: Address" />

JavaScript

 function MyViewModel() {
         var self = this;
         self.userInput = ko.observable();
         self.Hometown = ko.observable();
         self.Address = ko.observable();             

         self.userInput.subscribe(function () {
             readDatabase(self);
         });
     }
     ko.applyBindings(new MyViewModel());

function readDatabase(self){
    if(self.userInput().substring(0,1) == "a"){
        self.Hometown("A town");
        self.Address("A address");
    }
    else {
        self.Hometown("");
        self.Address("Other address");
    }
}

Answer 1

您可以使用扩展器来提供一个标志来指示数据的来源：

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");
    }
}

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" />

更新的小提琴