淘汰赛无法使用扩展程序扩展多个观察值
问题描述:
这与我的另一个问题here有关! 我想在不使用验证库的情况下创建自定义验证扩展器。淘汰赛无法使用扩展程序扩展多个观察值
我无法将我的扩展器扩展到多个可观察值。在下面的情况下,扩展器应用于密码字段,但不适用于重新输入密码字段。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript" src="knockout-3.4.0.js"></script>
Name:<input type="text" data-bind="value:Name" /><br />
Already A User: <input type="checkbox" data-bind="checked:AlreadyUser" /><br />
Password:<input type="password" data-bind="value:Password,visible:PasswordVisible" /><br />
Retype Password:<input type="password" data-bind="value:RetypePassword,visible:PasswordVisible" /><br />
<input type="button" value="Submit" onclick="validateModel();" />
<script type="text/javascript" >
var pageModel;
ko.extenders.Validate = function (target, validateOptions) {
target.HasErrors = ko.computed(function() {
var newValue = target();
var required = validateOptions.required();
var validationType = validateOptions.validationType;
if (ko.unwrap(required)) {
switch (validationType) {
case "Text":
return newValue == '';
default:
target.HasErrors(false);
break;
}
}
return false;
}, null, { deferEvaluation: true }).extend({ notify: 'always' });
return target;
};
//The model itself
var ViewModel = function() {
var self = this;
self.Name = ko.observable('');
self.AlreadyUser = ko.observable(false);
//computed variable that sets the visibility of the password field. I have to clear the password when am making it invisible
self.PasswordVisible = ko.computed(function() { return !this.AlreadyUser(); }, this).extend({ notify: 'always' });
//this field is only required when visible
self.Password = ko.observable('').extend({ Validate: { required: function() { return self.PasswordVisible(); }, validationType: "Text" } });
self.RetypePassword = ko.observable('').extend({ Validate: { required: function() { return self.PasswordVisible(); }, validationType: "Text" } });
self.AlreadyUser.subscribe(function (newVal) { self.RetypePassword(''); });
self.HasErrors = ko.computed(function() { return self.Password.HasErrors() && self.RetypePassword.HasErrors(); }, self);
};
//The method calls on click of button
function validateModel() {
alert(pageModel.HasErrors());
}
//create new instance of model and bind to the page
window.onload = function() {
pageModel = new ViewModel();
ko.applyBindings(pageModel);
};
</script>
</body>
</html>
答
我复制你的代码到一个互动的片断,发现有一个控制台错误......而且,不是在你的computed
所有路径返回的值。
我已经解决了这些问题,一切都按照您的预期工作。发布之前你有没有检查控制台?
错误:
-
newValue
没有定义
已计算错误:
- 你必须通过调用
target()
的计算的方法内 - 你“集创建预订“通过返回一个值来计算,而不是通过
computedObs(newVal)
里面的的方法。
var pageModel;
ko.extenders.Validate = function(target, validateOptions) {
target.HasErrors = ko.computed(function() {
var required = validateOptions.required();
var validationType = validateOptions.validationType;
var newValue = target();
if (ko.unwrap(required)) {
switch (validationType) {
case "Text":
return newValue == '';
default:
return false
}
}
return false;
}, null, {
deferEvaluation: true
}).extend({
notify: 'always'
});
return target;
};
//The model itself
var ViewModel = function() {
var self = this;
self.Name = ko.observable('');
self.AlreadyUser = ko.observable(false);
//computed variable that sets the visibility of the password field. I have to clear the password when am making it invisible
self.PasswordVisible = ko.computed(function() {
return !this.AlreadyUser();
}, this).extend({
notify: 'always'
});
//this field is only required when visible
self.Password = ko.observable('').extend({
Validate: {
required: function() {
return self.PasswordVisible();
},
validationType: "Text"
}
});
self.RetypePassword = ko.observable('').extend({
Validate: {
required: function() {
return self.PasswordVisible();
},
validationType: "Text"
}
});
self.AlreadyUser.subscribe(function(newVal) {
self.RetypePassword('');
});
self.HasErrors = ko.computed(function() {
return self.Password.HasErrors() && self.RetypePassword.HasErrors();
}, self);
};
//The method calls on click of button
function validateModel() {
alert(pageModel.HasErrors());
}
//create new instance of model and bind to the page
window.onload = function() {
pageModel = new ViewModel();
ko.applyBindings(pageModel);
};
.has-error {
background:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
Name:
<input type="text" data-bind="value:Name" />
<br />Already A User:
<input type="checkbox" data-bind="checked:AlreadyUser" />
<br />Password:
<input type="password" data-bind="value:Password, visible:PasswordVisible, css: {'has-error': Password.HasErrors }" />
<br />Retype Password:
<input type="password" data-bind="value:RetypePassword,visible:PasswordVisible, css: {'has-error': RetypePassword.HasErrors }" />
<br />
<input type="button" value="Submit" onclick="validateModel();" />
+0
哎呀。对不起我的坏... JS的调试关闭在我的IE浏览器。 – Ramki
我已经成功地解决了这个问题 – Ramki