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

Question

有没有一种方法可以扩展一个可观察对象，使其仅在和可观察对象为真时才需要，并且可以跟踪更改？

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

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)时才能正常工作，但是当任何可观察值的值发生更改时就不起作用。

Answer 1

一些事情:

1. 在设置扩展程序时，您需要传递可观察对象，而不是可观察对象的内容。 (您也不能在 Field2 存在之前基于 Field2 创建 Field1。)
2. 您需要两个订阅，这样如果对一个的更改导致另一个无效，就会引起注意。
3. (更新)您可以使用计算的而不是订阅和可观察的

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()}" />