0

我有一个复选框和一个文本框（两者都已启用并且复选框开始未选中 [false]）。我需要的是以下内容：

  1. 当我在文本框中写一些东西并离开它（失去焦点）时，复选框会自动选中。
  2. 当我在文本框中写东西时，将其删除并保留复选框应保持未选中状态。
  3. 当我在文本框中写一些东西并单击复选框时，现在会选中该复选框，并且不会清除文本框中的数据。
  4. 当我在文本框中写一些东西并单击复选框两次时，首先发生第 3 步，然后取消选中复选框并清除文本框中的数据。
  5. 当我单击复选框时，复选框被选中，然后我在文本框中写入并取消选中复选框，然后文本框中的数据被清除。

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

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

如果您尝试上述所有步骤，则此方法适用于所有步骤，但是当您再次尝试其中一些步骤时，某些步骤将停止工作......特别是如果您在未选中复选框的情况下在文本框中写一些内容然后离开文本框，它不再自动选中复选框。如您所见，我尝试使用标志，但始终无法使其适用于所有情况。我已经为此工作了好几天，所以如果您能尽快帮助我，我将不胜感激！提前致谢！！

4

1 回答 1

0

几乎不可能直接回答您的问题，但我觉得最接近的可能是注意一些您可能还需要考虑的 KO 功能。

  • value绑定支持一个版本，这valueUpdate = 'afterkeydown'将允许您保持您的文本框和复选框实时同步。这很可能消除对要求 3 的需求。
  • computedobservable支持特化和read操作write，有时可能比使用subscriptions 更清晰。
  • 如果您必须遵守要求 3 ，您可能需要为复选框引入“宽限期” 。只是不要在离开文本框后很快更新复选框。throttle扩展器和绑定hasfocus可以帮助您。

关于何时使用哪个功能有一篇很棒的博文。

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

  1. 有一个文本框来保存实际的订单/标准/名称/任何东西。
  2. 有一个复选框表明需要这样的订单/等。
    • 此复选框应与用户是否键入一些文本同步（选中）。
    • 如果用户清空文本框，该复选框应该是同步的（未选中）。
  3. 如果用户选中该复选框，则
    • 如果订单/等有文本，则应将其清除。
    • 如果没有文本，则应建议默认顺序/等。

这是一个 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();
    }
};

和视图模型：

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 上这对我们来说很难做到。

于 2013-06-01T09:17:00.967 回答