녹아웃 유효성 검사 : validationMessage 변경에 바인딩

Question

녹아웃 유효성 검사를 사용하는 양식에서 작업 중이며 유효성 검사 메시지를 표시하는 범위와 관련된 confirmPassword 입력이 있습니다. 즉, ko에서 insertMessages가 false로 설정되었습니다. validation.init). 나는 슬라이드에서이 기간에 애니메이션을 원하는, 그래서는 높이 (내가 높이에 설정 CSS 전환을) 변경 사용자 정의 바인딩이 사업부에 싸여 :

<div class="slideOuter"> 
    <div class="slideInner" data-bind="slideElement: confirmPassword.isModified() & !confirmPassword.isValid()"> 
     ... 
     <span class="form-control" data-bind="validationMessage: confirmPassword"></span> 
     ... 

바인딩 코드 :

를

ko.bindingHandlers.slideElement = { 
    update: function (element, valueAccessor, allBindings) { 
     // First get the latest data that we're bound to 
     var value = valueAccessor(); 

     // Next, whether or not the supplied model property is observable, get its current value 
     var valueUnwrapped = ko.unwrap(value); 

     var $outer = $(element).closest('.slideOuter'); 
     var $inner = $(element).closest('.slideInner'); 

     if (valueUnwrapped == true) { 
      // Make the element visible 
      $(element).css('display', 'block'); 
      setTimeout(function() { $outer.css('height', $inner.outerHeight(true) + "px"); }, 0); 
     } 
     else { 
      // Make the element invisible 
      $(element).css('display', 'none'); 
      $outer.css('height', "0px"); 
     } 
    } 
}; 

validationMessage가 변경되면이 사용자 정의 바인딩이 작동하지 않는 문제가 있습니다. 이 설정은만큼 validationMessage이 동일하게 유지으로 위대한 작품을하지만, confirmPassword와 함께, 내가 오류에 따라 두 가지 메시지가 : 나는 양식에있는 공간으로

self.confirmPassword = ko.observable("").extend(
    { 
     required: 
      { 
       params: true, 
       message: "Confirm Password is required" 
      }, 
     equal: 
      { 
       params: self.password, 
       message: "The confirmation does not match the password" 
      } 
    }); 

를 첫 번째 메시지는 하나를 차지 두 번째 메시지는 두 줄을 차지합니다. 문제는 두 메시지 사이를 전환 할 때 사용자 지정 바인딩이 실행되지 않기 때문에 내 슬라이드 div의 높이가 validationMessage의 새 크기를 보완하지 않는다는 것입니다. (예 : 먼저 암호를 확인하지 않기 때문에 짧은 메시지가 validationMessage이고 slideElement 사용자 정의 바인딩이 실행되고 적절한 높이로 div가 설정됩니다. 그런 다음 확인 암호를 암호가 아닌 다른 것으로 변경하면 해당 암호가 표시되지 않습니다. 두 번째 메시지가 새 validationMessage가되어 div에 표시되도록합니다. 그러나 사용자 정의 바인딩이 실행되지 않고 div의 높이가 보정되지 않습니다.

validationMessage가 변경되면 이벤트가 발생합니까?

Answer 1

이 방법을 사용할 수있는 방법을 찾았지만 거의 우아하지 않습니다. knockout.validation의 v2.0은 observable.error를 관찰 가능하게 만들어줌으로써이 시나리오를보다 쉽게 ​​만들 수 있지만, 그 동안에는 여러 validationMessages가있는 observables에 대한 두 번째 사용자 정의 바인딩을 만들어 내 것과 같은 문제를 해결할 수 있습니다. 메시지가 변경 될 때 무언가를 :

보기 모델 또한 :

self.confirmPassword.ValMsg = null; 
    self.confirmPassword.ValMsgUpdate = ko.observable(false); 
    self.confirmPassword.subscribe(function (newValue) { 
     if (self.confirmPassword.ValMsg != self.confirmPassword.error) 
     { 
      self.confirmPassword.ValMsg = self.confirmPassword.error; 
      self.confirmPassword.ValMsgUpdate(true); 
      self.confirmPassword.ValMsgUpdate(false); 
     } 
    }); 

HTML을 업데이트 :

<div class="slideInner" data-bind="slideElement: confirmPassword.isModified() & !confirmPassword.isValid(), slideElementUpdate: confirmPassword.ValMsgUpdate()"> 

사용자 정의 바인딩 또한 :

ko.bindingHandlers.slideElementUpdate = { 
     update: function (element, valueAccessor, allBindings) { 
      // First get the latest data that we're bound to 
      var value = valueAccessor(); 

      // Next, whether or not the supplied model property is observable, get its current value 
      var valueUnwrapped = ko.unwrap(value); 

      if (valueUnwrapped == true) { 
       var $outer = $(element).closest('.slideOuter'); 
       var $inner = $(element).closest('.slideInner'); 
       $outer.css('height', $inner.outerHeight(true) + "px"); 
      } 
     } 
    };