다단계 마법사 스타일 모델로 ko.validation

Question

this answer을 ko.validation으로 변환하려고합니다.

나는 모델 상태가 유효한 경우에만 사용할 수 있도록 다음 버튼을 얻기에 붙어 아래하지만 내 코드가 제대로 평가되지 오전 :

self.modelIsValid = function() { 
     self.currentStep().model().isValid(); 
}; 

나는 현재 붙어 오전 취할 신선한 눈을 부탁드립니다 봐. 모델은 OK를 확인하고 (오류 메시지가 표시된 상태에서) 최종 단계는 다음 버튼을 제어하는 ​​modelIsValid를 사용하여 각 모델의 유효성을 검사하는 것입니다.

jsfiddle is here 및 코드는 아래와 같습니다.

ko.validation.configure({ 
    insertMessages: false, 
    decorateElement: true, 
    errorElementClass: 'error' 
}); 

function Step(id, name, template, model) { 
    var self = this; 
    self.id = id; 
    self.name = ko.observable(name); 
    self.template = template; 
    self.model = ko.observable(model); 

    self.getTemplate = function() { 
     return self.template; 
    }; 
} 

function ViewModel(model) { 
    var self = this; 

    self.nameModel = ko.observable(new NameModel(model));  
    self.addressModel = ko.observable(new AddressModel(model)); 

    self.stepModels = ko.observableArray([ 
      new Step(1, "Step1", "nameTmpl", self.nameModel()), 
      new Step(2, "Step2", "addressTmpl", self.addressModel()), 
      new Step(3, "Confirmation", "confirmTmpl", {NameModel: self.nameModel(), AddressModel:self.addressModel()})]); 

    self.currentStep = ko.observable(self.stepModels()[0]); 

    self.currentIndex = ko.computed(function() { 
     return self.stepModels.indexOf(self.currentStep()); 
    }); 

    self.getTemplate = function(data) { 
     return self.currentStep().template(); 
    }; 

    self.canGoNext = ko.computed(function() { 
     return (self.currentIndex() < (self.stepModels().length - 1)); 
    });  

    self.modelIsValid = function() { 
     self.currentStep().model().isValid(); 
    }; 

    self.goNext = function() { 
     if (((self.currentIndex() < self.stepModels().length - 1) && ($('.validationMessage:visible').length <= 0))) { 
      self.currentStep(self.stepModels()[self.currentIndex() + 1]); 
     } 
    }; 

    self.canGoPrevious = ko.computed(function() { 
     return self.currentIndex() > 0; 
    }); 

    self.goPrevious = function() { 
     if ((self.currentIndex() > 0 && ($('.validationMessage:visible').length <= 0))) { 
      self.currentStep(self.stepModels()[self.currentIndex() - 1]); 
     } 
    }; 
} 

NameModel = function (model) { 
    var self = this; 

    //Observables 
    self.FirstName = ko.observable(model.FirstName).extend({ required: true }); 
    self.LastName = ko.observable(model.LastName).extend({ required: true }); 

    return self; 
}; 

AddressModel = function(model) { 
    var self = this; 

    //Observables 
    self.Address = ko.observable(model.Address).extend({ required: true });; 
    self.PostalCode = ko.observable(model.PostalCode).extend({ required: true });; 
    self.City = ko.observable(model.City).extend({ required: true });; 

    return self; 
}; 

    var viewModelFromServer = { 
     "FirstName": "John", 
     "LastName": "Doe", 
     "Address": "123 Main St", 
     "PostalCode": "53201", 
     "City": "Milwaukee" 
    }; 

ko.applyBindings(new ViewModel(viewModelFromServer)); 

는 마지막 뷰가 표시되지 않는 한 케빈의 대답

에 편집이 그렇게 다음에 당신에게 modelIsValid 기능을 변경, 유효성 검사 그룹이보기에 대해 정의되지 않았기 때문에 밝혀졌다 :

self.modelIsValid = ko.computed(function() { 
    if (typeof(self.currentStep().model().isValid) != "undefined") { 
     return self.currentStep().model().isValid(); 
    } 
    else 
     return true; // no validation used for viewmodel, so just return true 
}); 

나는 아주 많은 자바 스크립트 초보자이지만이 기능이 작동합니다!

당신이 당신의 이름과 주소 모델의 개별 관찰 가능한에 유효성 검사 규칙을 적용했지만, 명시 적으로 각 모델에서 그룹화를 수행하지 않고 그룹화 기능을 사용하려고

Answer 1

: 또한

NameModel = function (model) { 
    var self = this; 

    //Observables 
    self.FirstName = ko.observable(model.FirstName).extend({ required: true }); 
    self.LastName = ko.observable(model.LastName).extend({ required: true }); 

    ko.validation.group(self); 

    return self; 
}; 

, 당신 modelIsValid을해야하는 관찰 계산 :

self.modelIsValid = ko.computed(function() { 
    return self.currentStep().model().isValid(); 
}); 

업데이트 바이올린-http://jsfiddle.net/jnTjW/4/