目的: 实践一下Knockout提供的CSS绑定功能和afterkeydown事件.
步骤: 先在htm中添加.error的css样式, 并在输入框中绑定css: { error: !firstNameIsValid()}, 然后再在ViewModel中在firstName监控属性后面再添加一个firstNameIsValid布尔型监控属性, 并给ViewModel添加一个afterkeydown事件, 在这里检查输入框中的值是否符合校验规则, 如果不通过, 就把firstNameIsValid设置为false, 这样, 输入框就有了红色边框, 如果输入正确, 则把firstNameIsValid设置为true, 这样, 输入框的红色边框就消失了.
1.Htm代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPE html> <head> <title></title>
<script src= "Lib/require/require.js"
data-main= "JsDemo2_Main" ></script>
<style type= "text/css" >
.error {
border: 2px solid red;
}
input {
border: 1px solid
#AAA;
padding: 4px;
}
</style>
</head> <body> <input id= "txtFirstName"
type= "text"
data-bind= "value:firstName, css: { error: !firstNameIsValid()}"
/>
<input id= "txtLastName"
type= "text"
data-bind= "value:lastName, css: { error: !lastNameIsValid()}"
/>
<button id= "btn"
data-bind= "click:SubmitClick"
>btn</button>
<br /><br />
<!--显示错误提示信息 start-->
<font color= "red" >
<b>
<div id= "ErrorMessage" ></div>
</b>
</font>
<!--显示错误提示信息 end-->
</body> </html> |
2.JsDemo2_Main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
require.config({ paths: {
"knockout" : "Lib/knockout/knockout-2.3.0" ,
"jquery" : "Lib/jquery/jquery-1.9.1.min"
}
}); require([ ‘knockout‘ , ‘jquery‘ ], function
( ko, $) {
//数据绑定
var
viewModel = {
firstName: ko.observable( "" ),
firstNameIsValid: ko.observable( true ),
firstNameInValidMessage: ko.observable(),
lastName: ko.observable( "" ),
lastNameIsValid: ko.observable( true ),
lastNameInValidMessage: ko.observable(),
AllErrorMessage: ko.observable(),
SubmitClick: function
() {
viewModel.ChecktFirstNameIsValid();
viewModel.ChecktLastNameIsValid();
viewModel.ShowAllErrorMessage();
if
(viewModel.AllErrorMessage().length > 0) {
alert( "fail" );
return
false ;
}
else
{
alert( "ok" );
return
true ;
//可以提交数据了.
}
},
ChecktFirstNameIsValid: function
() {
if
(viewModel.firstName().length <= 10) {
viewModel.firstNameIsValid( false );
viewModel.firstNameInValidMessage( "firstName请输入至少10位字符" )
}
else
{
viewModel.firstNameIsValid( true );
viewModel.firstNameInValidMessage( "" )
}
},
ChecktLastNameIsValid: function
() {
if
(viewModel.lastName().length <= 10) {
viewModel.lastNameIsValid( false );
viewModel.lastNameInValidMessage( "lastName请输入至少10位字符" )
}
else
{
viewModel.lastNameIsValid( true );
viewModel.lastNameInValidMessage( "" )
}
},
ShowAllErrorMessage: function
() {
var
message = "" ;
if
(!viewModel.firstNameIsValid()) {
message += "\n"
+ viewModel.firstNameInValidMessage();
}
if
(!viewModel.lastNameIsValid()) {
message += "\n"
+ viewModel.lastNameInValidMessage();
}
viewModel.AllErrorMessage(message);
if
(viewModel.AllErrorMessage().length > 0) {
$( "#ErrorMessage" ).html(message);
}
else
{
$( "#ErrorMessage" ).html( "" );
}
}
};
/*$(‘#txtFirstName‘).on(‘blur‘, function () {
viewModel.ChecktFirstNameIsValid();
viewModel.ShowAllErrorMessage();
});
$(‘#txtLastName‘).on(‘blur‘, function () {
viewModel.ChecktLastNameIsValid();
viewModel.ShowAllErrorMessage();
});*/
viewModel.afterkeydown = ko.dependentObservable( function
() {
viewModel.ChecktFirstNameIsValid();
viewModel.ChecktLastNameIsValid();
viewModel.ShowAllErrorMessage();
}, viewModel);
$(document).ready( function
() {
ko.applyBindings(viewModel);
});
}); |
3.截图
4.总结
afterkeydown会在页面一开始加载就运行, 这点感觉不太友好, 实际上应该把它用在适合它发挥的场景中, 例如: 要求输入完数据后自动变成英文大写, 这时使用afterkeydown就很合适了, 添加的代码如下:
1
2
3
4
|
viewModel.afterkeydown = ko.dependentObservable( function
() {
viewModel.firstName(viewModel.firstName().toUpperCase());
viewModel.lastName(viewModel.lastName().toUpperCase());
}, viewModel); |
Knockout: 实践CSS绑定和afterkeydown事件, 给未通过校验的输入框添加红色边框突出显示; 使用afterkeydown事件自动将输入转大写字母.,布布扣,bubuko.com
Knockout: 实践CSS绑定和afterkeydown事件, 给未通过校验的输入框添加红色边框突出显示; 使用afterkeydown事件自动将输入转大写字母.