Knockout.Js官网学习(value绑定)
前言
value绑定是关联DOM元素的值到view model的属性上。主要是用在表单控件<input>,<select>和<textarea>上。
当用户编辑表单控件的时候, view model对应的属性值会自动更新。同样,当你更新view model属性的时候,相对应的元素值在页面上也会自动更新。
注:如果你在checkbox或者radio button上使用checked绑定来读取或者写入元素的 checked状态,而不是value 值的绑定。
简单示例
代码如下对两个input进行value的属性绑定
<p>Login name: <input data-bind="value: userName"/></p><p>Password: <input type="password" data-bind="value: userPassword"/></p><script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script> <script type="text/javascript"> var viewModel = { userName: ko.observable(""), userPassword: ko.observable("abc") }; ko.applyBindings(viewModel);</script>
运行后效果为
注意密码的type为password
KO设置此参数为元素的value值。之前的值将被覆盖。
如果参数是监控属性observable的,那元素的value值将根据参数值的变化而更新,如果不是,那元素的value值将只设置一次并且以后不在更新。
如果你提供的参数不是一个数字或者字符串(而是对象或者数组)的话,那显示的value值就是yourParameter.toString() 的内容(通常没用,所以最好都设置为数字或者字符串)。
不管什么时候,只要你更新了元素的值,那 KO都会将view model对应的属性值自动更新。默认情况下当用户离开焦点(例如onchange事件)的时候,KO才更新这个值,但是你可以通过第2个参数valueUpdate来特别指定改变值的时机。
valueUpdate
如果你使用valueUpdate参数,那就是意味着KO将使用自定义的事件而不是默认的离开焦点事件。下面是一些最常用的选项:
“change”(默认值) - 当失去焦点的时候更新view model的值,或者是<select> 元素被选择的时候。
“keyup” – 当用户敲完一个字符以后立即更新view model。
“keypress” – 当用户正在敲一个字符但没有释放键盘的时候就立即更新view model。不像 keyup,这个更新和keydown是一样的。
“afterkeydown” – 当用户开始输入字符的时候就更新view model。主要是捕获浏览器的keydown事件或异步handle事件。
上述这些选项,如果你想让你的view model进行实时更新,使用“afterkeydown”是最好的选择。
<p>Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'"/></p><p>You have typed: <span data-bind="text: someValue"></span></p>
someValue: ko.observable("edit me")
绑定下拉菜单drop-down list(例如SELECT)
Knockout对下拉菜单drop-down list绑定有一个特殊的支持,那就是在读取和写入绑定的时候,这个值可以是任意JavaScript对象,而不必非得是字符串。在你让你用户选择一组model对象的时候非常有用。具体例子,参考options绑定。
类似,如果你想创建一个multi-select list,参考selectedOptions绑定。
更新observable和non-observable属性值
如果你用value绑定将你的表单元素和你的observable属性关联起来,KO设置的2-way的双向绑定,任何一方改变都会更新另外一方的值。
但是,如果你的元素绑定的是一个non-observable属性(例如是一个原始的字符串或者JavaScript表达式) ,KO会这样执行:
1.如果你绑定的non-observable属性是简单对象,例如一个常见的属性值,KO会设置这个值为form表单元素的初始值,如果你改变form表单元素的值,KO会将值重新写回到view mode的这个属性。但当这个属性自己改变的时候,元素却不会再变化了(因为不是observable的),所以它仅仅是1-way绑定。
2.如果你绑定的non-observable属性是复杂对象,例如复杂的JavaScript 表达式或者子属性,KO也会设置这个值为form表单元素的初始值,但是改变form表单元素的值的时候,KO不会再写会view model属性,这种情况叫one-time-only value setter,不是真正的绑定。
例如:
<p>First value: <input data-bind="value: firstValue"/></p> <!-- two-way binding --><p>Second value: <input data-bind="value: secondValue"/></p> <!-- one-way binding --><p>Third value: <input data-bind="value: secondValue.length"/></p> <!-- no binding --> <script type="text/javascript"> var viewModel = { firstValue: ko.observable("hello"), // Observable secondValue: "hello, again"// Not observable }; ko.applyBindings(viewModel);</script>
最新文章
- Linux CPAN Perl 模块安装
- Java 枚举活用
- Struts表单格局;theme三个属性值:simple,xhtml,css_xhtml
- POJ 2296 二分+2-sat
- C++11强类型枚举
- android 开源 + 一些素材网站
- uva 10054 The Necklace 拼项链 欧拉回路基础应用
- EF 存储过程(下)
- SQL 把数据从一张表更新到另一张表
- poj1144Network(无向图割点数)
- 日期,为下拉列表添加日期,优化,目前本人博客上最优的解决方案,之前学习的通过判断得到平年闰年,而这个是让系统自动去判断,无须if判断,代码示例
- sql优化方式-转载
- Python面向对象3:面向对象的三大特性
- stlcky footers布局小技巧
- maven打包自定义jar到maven仓库
- 描述符__get__(),__set__(),__delete__()(三十七)
- .2 Git 分支 - 分支的新建与合并
- java中 immutable,future,nio
- mysql optimize整理表碎片
- c语言使用指针实现模拟java/c# string.concat字符串串联方法
热门文章
- 使用FIO对SATA、SSD和PCIe Flash进行测试
- Mysql 相关字段类型长度
- 100怎么变成100.00 || undefined在数字环境下是:NaN || null在数字环境下是0 || 数组的toString()方法把每个元素变成字符串,拼在一起以逗号隔开 || 空数组转换成字符串后是什么?
- 会话状态已创建一个会话 ID,但由于响应已被应用程序刷新而无法保存它
- js点击打开一个固定宽高的网页
- React知识点总结1
- C# 导入EXCEL 报错外部表不是预期的格式错误 .
- Spring Web应用的最大瑕疵
- 深入理解js——自由变量和作用域链
- DIOCP之编写第一个应用程序(二)