javascript - knockout validation 使用可观察参数扩展 'required only if'

有没有办法扩展 observable 以使其仅当 observable 为真时才需要它，并且可以跟踪更改？

例如，我得到了这个自定义扩展器:

ko.extenders.requiredOnlyIf = function (target, makeRequired) {
target.HasError = ko.observable();

function validate(newValue) {
    if (makeRequired) {
        target.HasError(newValue ? false : true);
    } else {
        target.HasError(false);
    }
}

   validate(target());
   target.subscribe(validate);
   return target;
}

而这个可观察的:

self.Field1 = ko.observable().extend({ requiredOnlyIf : self.Field2() });
self.Field2 = ko.observable().extend({ requiredOnlyIf : self.Field1() });

这个 observables 是依赖的，所以，如果一个被填充，另一个也必须被填充。但是扩展器仅在第一次绑定(bind)值时才能正常工作，但是当任何可观察值的值发生更改时，它就不起作用了。

最佳答案

几件事:

在设置扩展时，您需要传递 observables，而不是 observables 的内容。 (您也不能在 Field2 存在之前基于 Field2 创建 Field1。)

您需要两个订阅，以便如果对一个的更改使另一个无效，则会注意到这一点。

(update) 你可以使用一个计算的

，而不是订阅和一个 observable

ko.extenders.requiredOnlyIf = function(target, makeRequired) {
  target.HasError = ko.pureComputed(() => {
    const otherHasValue = !!makeRequired();
    const targetHasValue = !!target();

    return otherHasValue && !targetHasValue;
  });

  return target;
}

self = {};

self.Field1 = ko.observable();
self.Field2 = ko.observable().extend({
  requiredOnlyIf: self.Field1
});
self.Field1.extend({
  requiredOnlyIf: self.Field2
});

ko.applyBindings(self);

.invalid {
  border-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input data-bind="value: Field1, css: {invalid: Field1.HasError()}" />
<input data-bind="value: Field2, css: {invalid: Field2.HasError()}" />

关于javascript - knockout validation 使用可观察参数扩展 'required only if'，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38926275/