knockoutJS学习笔记08:表单域绑定

  前面的绑定都是用在基本标签上,这章主要讲表单域标签的绑定。

一、value 绑定

  绑定标签:input text、textarea。

    <p>用户名:<input type="text" data-bind="value:name" /><span data-bind="text:name"></span></p>
<p>密码:<input type="text" data-bind="value:password" /><span data-bind="text:password"></span></p>
function UserInfo(){
var self = this;
self.name = ko.observable("tom");
self.password = ko.observable("123456");
}
var userInfo = new UserInfo();
ko.applyBindings(userInfo);

  关于value还有一个参数:valueUpdate,用于设置触发绑定的时机。支持以下值:  

  “change”(默认值) - 当失去焦点的时候更新view model的值,或者是<select> 元素被选择的时候。

“keyup” – 当用户敲完一个字符以后立即更新view model。

“keypress” – 当用户正在敲一个字符但没有释放键盘的时候就立即更新view model。不像 keyup,这个更新和keydown是一样的。

“afterkeydown” – 当用户开始输入字符的时候就更新view model。主要是捕获浏览器的keydown事件或异步handle事件。

上述这些选项,如果你想让你的view model进行实时更新,使用“afterkeydown”是最好的选择。

  例如,我可以将上面的用户名编辑框改为:<input type="text" data-bind="value:name,valueUpdate:'afterKeydown'"/> 这样就可以实时更新了。

二、options 绑定

  绑定标签:select。

  例1:options指定项集。

<select data-bind="options:items"></select>
var items = ["item1","item2","item3"];
ko.applyBindings(items); //添加新项
items.push("item4");

  例2:optionsText:指定要显示的属性的名称;optionsCaption:初始选项;value:被选中的项。

    <select data-bind="options:items,optionsText:'name',optionsCaption:'请选择...',value:selectedValue"></select>
<div data-bind="text:selectedValue() ? selectedValue().name : '未选择'"></div>
var data = {
items:ko.observableArray([{name:"中国",rank:1},{name:"美国",rank:2},{name:"俄罗斯",rank:3}]),
selectedValue:ko.observable()
}
ko.applyBindings(data);

三、selectedOptions 绑定

  绑定标签:multiple select

    <select data-bind="options:items,selectedOptions:selectedItems" multiple="multiple" size="5"></select>
<div data-bind="text:selectedItems().join(',')"></div>
var data = {
items:ko.observableArray(["中国","美国","俄罗斯"]),
selectedItems : ko.observableArray(["中国"])
}
ko.applyBindings(data);

  selectedOptions表示选中的项。selectedOptions不仅可以支持字符串,还可以像options一样支持对象类型。

四、checked 绑定

  绑定标签:radio、checkbox。

  例1,相同checked属性的radio为一个组。

    <input type="radio" value="basketball" data-bind="checked:sport"/>篮球
<input type="radio" value="football" data-bind="checked:sport"/>足球
<input type="radio" value="running" data-bind="checked:sport"/>跑步
<p>您的选择:<span data-bind="text:getSport()"</p>
var data = {
sport:ko.observable("basketball"),
getSport:function(){
switch(data.sport()){
case "basketball":
return "篮球";
case "football":
return "足球";
case "running":
return "跑步";
default:
return "暂无";
}
}
}
ko.applyBindings(data);

  例2:checked可以多选,所以用observableArray。  

    <input type="checkbox" value="basketball" data-bind="checked:sport"/>篮球
<input type="checkbox" value="football" data-bind="checked:sport"/>足球
<input type="checkbox" value="running" data-bind="checked:sport"/>跑步
<p>您的选择:<span data-bind="text:getSport()"</p>
var data = {
sport:ko.observableArray(["basketball","football","running"]),
getSport:function(){
var sports = data.sport();
if(!sports){
return "暂无";
}
return sports.join(",");
}
}
ko.applyBindings(data);

五、enable 绑定/disable 绑定

  根据结果设置input 的 disabled 属性。这两个的作用是一样的。

    <input type="text" data-bind="enable:isEnabled" /><br />
<input type="button" value="Test" data-bind="disable:isDisabled" />

六、hasfocus 绑定

  结果为true时获得焦点。input text用得比较多。

七、click 和 submit 绑定

  绑定点击事件和提交事件。

  例1:函数第一个参数就是事件对象。

    <input type="button" value="click" data-bind="click:btnClick" />
var data = {
btnClick:function(event){
console.log(event);
}
}
ko.applyBindings(data);

  例2:取消事件冒泡,通过绑定 cancelBubble:false 就可以取消事件冒泡。

    <div data-bind="click:btnClick">
<input type="button" value="click" data-bind="click:btnClick,clickBubble:false" />
</div>

  例3:也可以在绑定事件里,传递参数到执行函数,最简单的方式就是用一个匿名函数包装一下。

    <div data-bind="click:btnClick">
<input type="button" value="click" data-bind="click:function(){btnClick('参数1','参数2');}" />
</div>  

  例4:submit 绑定在form标签上,只有绑定函数return ture时,才会提交表单。而为什么表单用submit绑定而不用普通的click绑定?因为表单绑定有更多的操作,例如按下enter键触发提交操作。

    <form action="Default.aspx" data-bind="submit:submitForm">
<input type="text" name="name" />
<input type="submit"/>
</form>
var data = {
submitForm:function(){
return true;
}
}

八、event 绑定

  除了点击事件,ko还支持其它事件的绑定。例如:keypress、mouseover、mouseout等。

    <div style="width:100px;height:100px;background:red;" data-bind="event:{mouseover:divMouseOver,mouseout:divMouseLeave}"></div>
<div data-bind="text:status"></div>
var data = {
divMouseOver:function(event){
this.status("over");
},
divMouseLeave:function(event){
this.status("out");
},
status:ko.observable("未开始")
}
ko.applyBindings(data);

九、总结

  ko不仅支持样式绑定,还支持事件绑定,将数据作为核心,我们只需要关注数据的变化和数据的逻辑操作,这大大提高了我们的开发效率。

上一篇:angular学习笔记(二十)-表单验证


下一篇:redux-form的学习笔记二--实现表单的同步验证