유효성 검사를 위해 녹아웃 ViewModel을 설정하십시오.

Question

knockoutjs 유효성 검사 플러그인을 사용하는 방법을 찾으려고합니다. github에있는 프로젝트 사이트를 보면 유효성 검사를 통해 뷰 모델을 설정하는 방법을 설명하는 getting started section이 있습니다.

function MyViewModel() { 
    var self = this; 
    self.property1 = ko.observable().extend({ required: true }); 
    self.property2 = ko.observable().extend({ max: 10 }); 
}; 

var viewModelInstance = new MyViewModel(); 
console.log(viewModelInstance.isValid()); //false 

viewModelInstance.property1('something'); 
viewModelInstance.property2(9); 

console.log(viewModelInstance.isValid()); //true 

:이 같은 함수를 사용하여 내 뷰 모델을 설정하고 싶은, 그러나

var myViewModel = ko.validatedObservable({ 
    property1: ko.observable().extend({ required: true }), 
    property2: ko.observable().extend({ max: 10 }) 
}); 

console.log(myViewModel.isValid()); //false 

myViewModel().property1('something'); 
myViewModel().property2(9); 

console.log(myViewModel.isValid()); //true 

:이 예에서 뷰 모델은 인라인 개체로 선언과 같이 (? 이것은 올바른 용어입니다)

문제는 내 viewModelInstance 개체에 isValid 메서드가 없다는 스크립트 오류가 발생한다는 것입니다.

Answer 1

ko.validatedObservable()은 viewModel 유효성 검사의 핵심입니다. 플러그인에 필요한 모든 내부 메소드를 작성합니다 (isValid 이상). 당신은 여전히 ​​기능을 가진 인스턴스를 생성하지만 ko.validatedObservable()에서 포장 시도 할 수 있습니다 :

var viewModelInstance = ko.validatedObservable(new MyViewModel()); 

Answer 2

이 소스 코드에서 정의이며, 유일한 장소 그것은 knockout.validation.js 소스 내에서 사용된다.

validatedObservable()이 –이고 이것만으로도됩니다. 보다 가치 내 경험에

ko.validatedObservable = function (initialValue) 
{ 
    if (!kv.utils.isObject(initialValue)) { return ko.observable(initialValue).extend({ validatable: true }); } 

    var obsv = ko.observable(initialValue); 
    obsv.errors = kv.group(initialValue); 
    obsv.isValid = ko.observable(initialValue.isValid()); 
    obsv.errors.subscribe(function (errors) { 
     obsv.isValid(errors.length === 0); 
    }); 
    debugger; 

    return obsv; 
}; 

그것은 더 많은 문제입니다 - 예를 들어이 생성되는 '그룹'에 대한 '깊이'를 지정하는 옵션을 가지고 있지 않으며, 나는 그것이 정말 단순한 '하나를위한 생각 수준의 'js 개체.

당신이 복잡한 모델을 가지고 있다면 당신은 당신이 정말로 유효성을 검사 할 이런 일을하고 객체의 배열을 만드는 것이 더 낫다 : 당신이를 추가하는 ko.validatedObservable``사용하여

var validatables = []; 

    // if credit card is payment then validate payment details + address 
    if (this.paymentMethod() == "Credit Card") 
    { 
     validatables.push(this.paymentDetails); 
     validatables.push(this.billingAddress); 

     if (this.shipToBillingAddress() == false) 
     { 
      validatables.push(this.shippingAddress); 
     } 
    } 

    var group = ko.validation.group(validatables, { deep: true });