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不仅支持样式绑定，还支持事件绑定，将数据作为核心，我们只需要关注数据的变化和数据的逻辑操作，这大大提高了我们的开发效率。
