knockoutjs十一 value绑定
我自己都没有想到自己会写一个博客写到第十一篇,而且看过我博客的人也越来越多,我在这期间也学会了更多,这个系列的博客估计在十五篇左右就结束了,我准备把经常用到的都写完,还又一些更高级的就不写了,毕竟我因为离开了之前的公司,不再用这个框架了,以后可能会写一些小的demo,希望大家到时候还能捧场。
废话不多说:
1 | <p>Login name: |
今天的value绑定确实使用的比较多的,因为表单中基本都是,所以需要详细介绍,这是一个简单的例子,value绑定主要用于 <input>, <select> 和<textarea>
这几个元素,而radio button 和checkbox使用checked,将会在下一次讲解。
1)value绑定的主要参数将会被设置为元素的value属性,这个值可以用jquery的val()方法获取,而且这个值会覆盖你原有的value属性,如果你这样使用
<input value="1" data-bind="value:number"/>
这样你的value=1会被绑定覆盖。
2)valueUpdate是第二个参数,ko实在change事件的时候检测input属性的改变,但是你可以通过valueUpdate来改变检测的时机,
“input” - 这是当input的值改变的时候触发,但是只支持一些现代浏览器比如ie9+;
“keyup” - 在你松开一个按键的时候触发改变你的viewmodel
“keypress” - 这是当你按下一个键的时候触发,但是和keyup不同的是,如果一直按着键,他会不断重复的触发。
“afterkeydown” 在你按一个键同时触发(官方用的时as soon as),他在你输入的同时,异步的改变viewmodel,但是在一些手机浏览器中不支持。
3)valueAllowUnset这个只适合在select元素中使用。
1 | <p> |
这个例子中,使用selectedCountry设置了一个原始选中值’Latvia’,可是在下拉选项中并没有这个值,所以ko把他重置为undefinded,那么就与’Choose one…’相匹配,就会默认选中’Choose one…’。这回在selectOption中详细讲解。
以下有几点注意
- 在使用
<input type="text" />
or<textarea>
时候,官方建议使用textInput绑定,这是一个新的绑定,在我之前使用的时候还没有。 - 使用observable和non-observable绑定的区别:
1 | <!-- Two-way binding. Populates textbox; syncs both ways. --> |
- 使用双向绑定,那么value和model中一个改变,另一个也会改变。但是使用的单向绑定,那么只会在初始化的时候给元素value赋值,在编辑的时候,会更新这个元素的value属性,但是当你的value属性改变的时候,model是不能检测到的,因为是一个单向绑定。如果绑定的不是一个简单的值,而是一个方法调用的结果,ko会用这个结果初始化元素的value属性,但是当在编辑表单的时候,不会改变元素的value属性,这种情况是一个一次性赋值,而不是一个能反映出改变的绑定。
今天的就讲解完了,代码托管在https://github.com/lushunming/knockoutJSDemo.git可以直接克隆。希望大家有意见可以留言,有疑问或者错误可以加我的qq1357197829和我交流。