我正在构建淘汰赛SPA。我正在尝试创建页面验证,其中如果项目在页面上,则它们将得到验证,如果项目不在页面上,则它们将不会得到验证。
我正在尝试找到一种可接受的方式来使这些项目通过这种方式进行验证。
我发现的是,一旦创建新模型并将其添加到我的现有模型中,敲除验证就不会正确地传播绑定到父视图模型,从而在创建对象时使其无效。
当您在PARENT框中键入内容时,主视图模型有效,当您单击“添加对象”时,它将添加一个新对象,但父模型仍然有效。您可以在框中键入内容并进行验证,然后父级验证整个内容,如果您从任一框中删除键入内容,则显示无效。真是奇怪。
您可以在以下小提琴中看到此行为: http://jsfiddle.net/3txv0p60/242/
HTML:
VALUE<input type="text" data-bind="textInput: name" />
<br />
PARENT OBJECT IS VALID:<span data-bind="html: validationObject.isValid"></span><br />
(((Parent object should represent the validity of the entire thing)))
<div style="display:block; height:50px">
</div>
<div>
<button data-bind="click: addObject">Add Object</button>
</div>
<div data-bind="if: anotherUser">
SUB-VALUE:
<input type="text" data-bind="textInput: anotherUser().firstName" />
<br /><br />
SUB-OBJECT ISVALID:<span data-bind="html: anotherUser().validationObject.isValid()"
</div>
js:
User = function () {
var self = this;
// observables
self.firstName = ko.observable();
// validation
self.validationObject = ko.validatedObservable({
firstName: self.firstName.extend({
required: true
})
});
};
IndexViewModel = function () {
var self = this;
// observables
self.users = ko.observable();
self.name = ko.observable();
self.anotherUser = ko.observable();
// functions
self.addObject = function() {
if (self.anotherUser() === undefined || self.anotherUser() === null){
self.anotherUser(new User());
}
};
// validation
self.validationObject = ko.validatedObservable({
anotherUser: self.anotherUser,
name: self.name.extend({
required: true
})
});
};
ko.validation.init({
grouping: {
deep: true,
live: true,
observable: true
}
});
var indexViewModel = new IndexViewModel();
ko.applyBindings(indexViewModel);