Question

我有一个复选框和一个文本框（两个都启用，复选框启动未选中[false]）。我需要的是以下内容：

当我在文本框中写一些内容并离开它（失去焦点）时复选框自动检查。
当我写一些东西时文本框，删除它并保留复选框应保留未选中状态。
当我在文本框中写入内容并单击时复选框，现在选中复选框，文本框中的数据为没有清除。
当我在文本框中写入内容并单击时复选框两次，第一次发生在第3步，然后是复选框未选中，文本框中的数据将被清除。
当我点击复选框时，选中复选框，然后我在文本框中写入并取消选中该复选框，然后清除文本框中的数据。

到目前为止我尝试的是以下代码：

//The checked property in the checkbox is binded to     
that.BuildingCriteria.IncludeLoadingDocks
that.BuildingCriteria.IncludeLoadingDocks.subscribe(function (newValue) {
                if (!that.updatingTextBox && !newValue) {
                    that.BuildingCriteria.LoadingDocksMin(null);
                }
            });

//The textbox value is binded to that.BuildingCriteria.LoadingDocksMin
that.BuildingCriteria.LoadingDocksMin.subscribe(function (newValue) {
                that.updatingTextBox = true;
                that.BuildingCriteria.IncludeLoadingDocks(true);
                that.updatingTextBox = false;
            });

如果您尝试上述所有步骤，对于所有这些步骤都有效，但是当您尝试其中一些步骤再次停止为某些工作时...特别是如果您在文本框中写了一些未选中复选框的内容然后离开文本框，它不再自动检查复选框。我尝试使用标志你可以看到，但我不能让它始终适用于所有情况。我已经做了好几天了，所以如果你能尽快帮助我，我会非常感激！在此先感谢!!

Answer 1

几乎不可能直截了当地回答你的问题，但从中我觉得最接近的可能是注意一些你可能需要考虑的KO功能。

value binding支持valueUpdate = 'afterkeydown'版本，可让您实时保持文本框和复选框的同步。这可能会消除对要求3的需求。
computed observable支持专门化read和write操作，有时可能比使用subscription更清晰。
如果必须坚持要求3，您可能需要为复选框引入“宽限期”。只是在离开文本框后不要太快更新复选框。 throttle extender和hasfocus binding可以帮助您。

何时使用哪个功能有great blogpost。

在任何情况下，如果没有业务案例，您的要求有点难以理解，甚至可能是您遇到XY-problem。根据您的实现要求，我假设功能（不是实现）这样的要求：

有一个文本框可以保存实际的订单/标准/名称/等等。
有一个复选框表示需要这样的订单/ etc。
- 此复选框应与用户是否键入某些文本同步（选中）。
- 如果用户清空文本框，则此复选框应同步（取消选中）。
如果用户选中了复选框
- 如果订单/等有文字，则应清除。
- 如果没有文字，则应建议默认订单/等。

这里是a jsfiddle，演示了如何处理这些功能需求。为了完整性，这里是相关代码，从视图开始：

<input type="checkbox" data-bind="checked: isChecked" />
<input type="textbox" data-bind="value: someText, valueUpdate: 'afterkeydown', selectSuggestion: someText" />

用于选择“默认建议文字”的自定义绑定：

var suggestion = "<enter something>";

ko.bindingHandlers.selectSuggestion = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var currentText = ko.utils.unwrapObservable(valueAccessor());
        if (currentText === suggestion) element.select();
    }
};

ViewModel：

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

    var privateIsChecked = ko.observable(false);
    var privateText = ko.observable("");

    self.isChecked = ko.computed({
        read: privateIsChecked,
        write: function(value) {
            if (!privateIsChecked() && value && privateText() === "") {
                privateText(suggestion);
            }
            if (privateIsChecked() && !value) {
                privateText("");
            }
            privateIsChecked(value);
        }
    });

    self.someText = ko.computed({
        read: privateText,
        write: function(value) {
            privateIsChecked(value !== "");

            privateText(value);
        }
    });
}

我知道这不会直接回答你的问题，但就像我说在Stack Overflow上为我们做的很难，而且不知道你的商业案例。

knockoutJS复选框和文本框一起工作

1 个答案: