Question

我有一个文本框和一个按钮。当文本框为空时，我需要禁用该按钮，当我开始在文本框中输入时，我想要启用该按钮。

目前，在文本框中输入一些文本后，当我从文本框中聚焦时，该按钮会启用。但是我希望在文本框不为空时启用此功能。我正在使用knockout.js，我的文本框和按钮都是可观察的。我有1个文本字段，如果所有字段都不为空，我想启用。如果任何字段为空，没有失去焦点，我想禁用该按钮这是我的代码：

var email = ko.observable({ emailField: ko.observable().extend({ email:
true, required: { param: true, message: FILL_FIELD } })), enableButton
 = ko.observable(), errorGroup = ko.validation.group([emailField]);

<input type="text" data-bind="value:emailField" />
<button data-bind="enable: enableButton>Press Next to enter password</button>

Answer 1

您有两种选择：

将textInput用于KO 3.2.0及更高版本;或
使用value和valueUpdate: 'afterkeydown'旁边的较低版本;

两者都要确保您的视图模型在按下按键后立即更新，并级联到enable等其他绑定。

Answer 2

让您的问题变得复杂的是您已经进行了验证，并且您希望验证等待焦点退出，因此在您输入时不断更新值不是解决方案。

相反，您可以单独观看input个事件，以跟踪哪些必填字段为空。 watchForEmpty是一个工厂，它接受一个observable并返回一个Knockout事件处理程序。它设置了清空列表的初始状态，事件处理程序维护它。当空的列表没有条目时，该按钮被启用。

vm = {
  empties: ko.observableArray(),
  thing: ko.observable('prefilled'),
  thing2: ko.observable(),
  watchForEmpty: function(observable) {
    var initVal = observable();
    if (initVal === '' || initVal === undefined) {
      vm.empties.push(observable);
    }
    return function(context, event) {
      var el = event.target;
      if (el.value === '') {
        vm.empties.push(observable);
      } else {
        vm.empties.remove(observable);
      }
    };
  }
};

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input data-bind="value: thing, event: {input: watchForEmpty(thing)}" />
<input data-bind="value: thing2, event: {input: watchForEmpty(thing2)}" />
<button data-bind="enable: empties().length === 0">Go</button>
<div data-bind="text: thing"></div>
<div data-bind="text: thing2"></div>

动态按钮根据错误组启用knockout js

2 个答案: