1
我正在尝试将this answer转换为使用ko.validation。ko.validation与多步骤向导样式模型
我停留在获得下一个按钮,在模型的状态是有效的使,但我下面的代码是不正确评估:
self.modelIsValid = function() {
self.currentStep().model().isValid();
};
我目前被卡住,希望得到一些新鲜的眼光取看看。模型确认OK(显示错误消息),最后一步是使用控制下一个按钮的modelIsValid来验证每个模型。
A 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
});
这似乎工作,虽然我非常喜欢JavaScript的新手!
感谢@Kevin,几乎在那里,但你的小提琴确认页面没有分页(只有页面到第2步)。我会看看我能看到为什么,同时有什么想法? – g18c
我解决了这个问题,请参阅我的问题的最后部分以获取更新 – g18c