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

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

一、value 绑定

　　绑定标签：input text、textarea。

?

1 2 3 4 5 6 7 8 9

<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指定项集。

?

1 2 3 4 5 6

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

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

?

1 2 3 4 5 6 7

<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

?

1 2 3 4 5 6 7

<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为一个组。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<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。　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<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 属性。这两个的作用是一样的。

?

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

六、hasfocus 绑定

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

七、click 和 submit 绑定

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

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

?

1 2 3 4 5 6 7

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

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

?

1 2 3

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

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

?

1 2 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键触发提交操作。

?

1 2 3 4 5 6 7 8 9

<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等。

?

1 2 3 4 5 6 7 8 9 10 11 12

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