2016-08-12 3 views
3

observable을 확장하여 observable이 true이고 변경 사항을 추적 할 수있는 경우에만 필요합니까? 하나가 채워지면, 다른 하나는 너무 작성해야녹아웃 유효성 검사 '필요한 경우에만 필요'매개 변수가 관찰 가능

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

이 관찰 가능한 의존, 그래서 예를 들면 다음과 같습니다

, 나는이 사용자 정의 확장 가지고 :

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

을 그리고 이것은 관찰 가능한. 그러나 Extender는 값이 처음 바인딩 될 때만 제대로 작동하지만 관찰 값 중 하나의 값이 변경되면 작동하지 않습니다.

답변

4

몇 가지 :

  1. 당신은 확장을 설정하면, 관찰 가능한 아니라 관찰 가능한 '내용을 전달해야합니다. Field2가 존재하기 전에 Field2를 기반으로 Field1을 만들 수 없습니다.
  2. 하나의 변경으로 인해 기타이 무효화되는 경우 2 개의 구독이 필요합니다.
  3. 구독보다
  4. (갱신)과 관찰, 당신은 내가 찾던 그냥 어떤 계산

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

+0

사용할 수 있습니다! 구독에 대해서도 말해 주셔서 감사합니다. 어떤 식 으로든 구독해야한다는 것을 알았지 만, 어떻게해야할지 모릅니다. 정말 고맙습니다. –

+0

계산 된 값이어야합니다. 코드가 업데이트되었습니다. –

관련 문제