javascript - 使两个字段与 knockout 互斥

Question

我正在尝试使文本输入和复选框相互排斥。

默认情况下，文本框应包含“0”，复选框应为 false。如果用户选中该复选框，则该文本框应被清空。如果用户在文本框中输入值，则应取消选中该复选框。任何时候都不应禁用任何一个字段或以其他方式不可编辑。

尽管有一个与击倒相关的小玩笑，但我几乎所有的行为都有效。如果用户在文本框中键入一个数字，然后在仍聚焦于文本框的情况下单击复选框，文本框的值将不会被清除。

我相信这是因为订阅触发的时间而发生的，但我不确定如何解决它。

标记:

<div id="container">
    <label>Number: </label><input type="text" data-bind="value: number" /> OR
    <input type="checkbox" id="all" data-bind="checked: all" /><label  or="all">All</label>
</div>

脚本:

var ViewModel = function () {
    var self = this;

    self.number = ko.observable(5);
    self.all = ko.observable(false);

    var updatedFromUser = true;

    self.number.subscribe(function (updatedNumber) {
        if (!updatedFromUser) {
            updatedFromUser = true;
            return;
        }

        updatedFromUser = false;
        self.all(updatedNumber === '');
    });

    self.all.subscribe(function (checked) {
        if (!updatedFromUser) {
            updatedFromUser = true;
            return;
        }

        updatedFromUser = false;
        if (checked) {
            self.number('');
        } else {
            self.number(0);
        }
    });
};

http://jsfiddle.net/rpnmvw1u/1/

Answer 1

默认 value binding更新 change 事件上的底层可观察对象，这通常发生在您离开文本框时，这就是为什么您的代码在单击复选框时仍然专注于文本框时无法正常工作的原因。

您可以使用 valueUpdate 选项更改此行为:将其设置为 afterkeydown 将在用户向文本框输入内容时更新您的可观察对象:

<input type="text" data-bind="value: number, valueUpdate: 'afterkeydown'" />

但是它本身不会修复您的代码，因为您当前的 updatedFromUser 用法并不总是正常工作。

我会为 all 属性使用可写计算:

self.number = ko.observable(5);
self.all = ko.computed({
    read: function () {
        return self.number() === '';
    },
    write: function (checked) {
        if (checked) {
            self.number('');
        } else {
            self.number(0);
        }
    }
});

演示 JSFiddle .

在这种情况下，KO 将为您处理订阅，并且没有依赖环，因为只有 all 依赖于 number。