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

Question

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

要求:

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

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

更新

我不反对从 jQuery 获得一些帮助。我不想完全放弃我的 View 模型绑定(bind)。

Fiddle

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

你可以使用 extender提供一个指示数据来源的标志:

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

Updated fiddle