Question

在我的网页上，我有以下2个输入，第一个是自动填充填充的文本框，第二个是普通文本框;

       <td style="width: 380px">
                <input type="text"
                       data-bind="enable: enableContract, jqAuto: {
                            source: getOptions,
                            value: SelectedContract,
                            labelProp: 'Label',
                            inputProp: JobDescription
                            }"
                       style="width: 99%;" />
            </td>
            <td style="width: 160px">
                <input type="text"
                       data-bind="value: Description, enable: enableContract, event: {change: disableContractIfConditionsMet}"
                       style="width: 99%;" />
            </td>

为了完成图片，当填充自动填充文本框时，将填充以下2个字段;

self.ContractId = ko.pureComputed(function () {
    if (self.SelectedContract() != null) {
        return self.SelectedContract().Id;
    }

    return 0;
});



self.JobName = ko.pureComputed(function () {
    if (self.SelectedContract() != null) {
        return self.SelectedContract().JobName;
    }

    return "";
});

自动填充文本框本身的值设置如下;

self.SelectedContract = ko.observable(self.JobDescription());

什么不起作用是第二个文本框上的更改事件。目的是当你输入文字＆＃34; Sick＆＃34;例如，它禁用并清除以前的文本框（并将ContractId设置为零，将JobName设置为空 - 尚未编码）。但是当我离开描述文本框时，不会执行此事件。我如何让它工作？

Answer 1

我建议不要使用change事件，而是订阅value绑定的observable。

var disableContractIfConditionsMet = function(currentDescription) {
  // Perform condition logic and set enable/disable states here
};

this.Description = ko.observable();
this.Description.subscribe(disableContractIfConditionsMet);

您甚至可以创建一个enabled / disabled 计算方法，该方法会根据Description的值自动更新。我不太了解确切的UI要求，所以我很难写出那些......

您如何使用计算机的示例：

ko.applyBindings(new function() {
  
  var REQUIRED_VALUE = "test";
  
  this.secondInputValue = ko.observable("");
  this.firstInputEnabled = ko.computed(function() {
    return this.secondInputValue()
      .toLowerCase()
      .includes(REQUIRED_VALUE);
  }, this);
  
});

input {
  display: block;
  margin-bottom: 1rem;
}

input:disabled {
  background: rgba(0,0,0,0.2);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<input data-bind="enable: firstInputEnabled">
<label>
  This input enables the first one if you type something containing "test"
<input data-bind="textInput: secondInputValue">
</label>

Answer 2

很难说为什么你的代码不起作用，但这里有一个使用change事件做你所描述的事件的片段，至少就禁用而言。我不理解jqAuto绑定，所以我不知道如何清除值。

self = {
  SelectedContract: ko.observable(),
  JobDescription: ko.observable(),
  enableContract: ko.observable(true),
  Description: ko.observable('descrip'),
  disableContractIfConditionsMet: () => {
    if (self.Description() === 'Sick') {
      self.enableContract(false)
    }
  }
};
self.ContractId = ko.pureComputed(function() {
  if (self.SelectedContract() != null) {
    return self.SelectedContract().Id;
  }

  return 0;
});
self.JobName = ko.pureComputed(function() {
  if (self.SelectedContract() != null) {
    return self.SelectedContract().JobName;
  }

  return "";
});

ko.applyBindings(self);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div>
  <input type="text" data-bind="enable: enableContract, jqAuto: {
                            source: getOptions,
                            value: SelectedContract,
                            labelProp: 'Label',
                            inputProp: JobDescription
                            }" style="width: 99%;" />
</div>
<div>
  <input type="text" data-bind="value: Description, enable: enableContract, event: {change: disableContractIfConditionsMet}" style="width: 99%;" />
</div>

淘汰赛：变更赛事不起作用

2 个答案: