KnockoutJs学习笔记(十二)
value binding一般适用于input、select、textarea等form elements中,能够将view model中的属性和相关联的DOM element的值(value)连接起来。一般情况下,当用户修改form域中的值时,KO会更新相关联的view model中的属性的值;同样的,当view model中的属性值发生变化时,KO也会更新页面中相关联的form域内的值。
注意:当我们处理checkboxs或是radio buttons时,我们一般使用checked binding来读写元素的checked状态,而不是使用value binding。
下面是一个简单的例子:
html部分:
<p>
Login name:
<input type="text" data-bind="value: loginName" />
</p> <p>
Password:
<input type="password" data-bind="value: password" />
</p>
js部分:
function MyViewModel() {
var self = this; self.loginName = ko.observable("");
self.password = ko.observable("1qaz");
} ko.applyBindings(new MyViewModel());
KO会将相应的元素的value设置为参数的值,且任意之前的value都会被覆盖掉。如果参数是一个observable,则binding会在参数值改变的时候更新元素中的value,否则,UI只会设置一次value的内容,以后不再更新。
当用户修改form域内使用了value binding的元素的value时,KO会相应地更新view model内被绑定的属性,默认情况下这其实是借由change event触发的,也就是在用户修改了这个值并转而关注另一个DOM节点的时候触发。但是我们也能够借由valueUpdate这一参数来通过其他的事件触发更新。常用的参数包括"input", "keyup", keypress", "afterkeydown"等。
注意一:如果我们希望绑定<input type="text">或是<textarea>以获取view model的即时更新,textInput binding相比于value binding会提供更好的支持。
注意二:KO会为select元素提供特殊的支持,value binding协同options binding能够让我们读写任意的javascript object,而不仅仅是字符串的值。更为详尽的内容可以参阅the options binding和the selectedOptions binding。这里还涉及到另一个参数valueAllowUnset的问题,待研究了options binding等以后再进行补充。
注意三:如果我们使用value binding的参数是一个observable,那么KO会设定一个双向的绑定,即form元素会与view model property互相影响;
如果参数是一个一般的view model property(不是observable),则KO会设定一个单项的绑定,即每当用户修改form元素的value时,KO便会修改相应的view model property,反之则不会对form元素造成影响;
如果参数并不是一个简单的property,而是一个函数或是比较判断语句,则KO只会利用这一语句返回的值来初始化form元素的value,之后并不会在两者之间建立联系。
对于以上的规则我有一个关于computed Observable的疑问,即computed Observable会产生怎样的联系呢?这个暂时留作以后研究。
注意四:这部分的内容与checked binding有关,待研究了checked binding以后再进行补充。
textInput binding主要作用于<input type="text">和<textarea>,它的主要作用在于提供一种即时的更新。拿value binding和textInput binding做一个对比,value binding中只有当用户专注于另一个node的时候,他之前更改的value才会作用于对应的view model property上,而textInput binding会在用户击键、拖拽、粘贴(任何修改value的操作)之后立即产生效果。
从另一个角度来说,textInput也能良好地兼容不同浏览器关于一些特殊事件响应的怪癖,所以一般来说对于<input type="text">和<textarea>等,使用textInput binding会更好一些。
KnockoutJs学习笔记(十二)的更多相关文章
- python3.4学习笔记(十二) python正则表达式的使用,使用pyspider匹配输出带.html结尾的URL
python3.4学习笔记(十二) python正则表达式的使用,使用pyspider匹配输出带.html结尾的URL实战例子:使用pyspider匹配输出带.html结尾的URL:@config(a ...
- Go语言学习笔记十二: 范围(Range)
Go语言学习笔记十二: 范围(Range) rang这个关键字主要用来遍历数组,切片,通道或Map.在数组和切片中返回索引值,在Map中返回key. 这个特别像python的方式.不过写法上比较怪异使 ...
- java jvm学习笔记十二(访问控制器的栈校验机制)
欢迎装载请说明出处:http://blog.csdn.net/yfqnihao 本节源码:http://download.csdn.net/detail/yfqnihao/4863854 这一节,我们 ...
- (C/C++学习笔记) 十二. 指针
十二. 指针 ● 基本概念 位系统下为4字节(8位十六进制数),在64位系统下为8字节(16位十六进制数) 进制表示的, 内存地址不占用内存空间 指针本身是一种数据类型, 它可以指向int, char ...
- Python学习笔记(十二)—Python3中pip包管理工具的安装【转】
本文转载自:https://blog.csdn.net/sinat_14849739/article/details/79101529 版权声明:本文为博主原创文章,未经博主允许不得转载. https ...
- ROS学习笔记十二:使用gazebo在ROS中仿真
想要在ROS系统中对我们的机器人进行仿真,需要使用gazebo. gazebo是一种适用于复杂室内多机器人和室外环境的仿真环境.它能够在三维环境中对多个机器人.传感器及物体进行仿真,产生实际传感器反馈 ...
- JavaScript权威设计--命名空间,函数,闭包(简要学习笔记十二)
1.作为命名空间的函数 有时候我们需要声明很多变量.这样的变量会污染全局变量并且可能与别人声明的变量产生冲突. 这时.解决办法是将代码放入一个函数中,然后调用这个函数.这样全局变量就变成了 局部变量. ...
- MySQL学习笔记十二:数据备份与恢复
数据备份 1.物理备份与逻辑备份 物理备份 物理备份就是将数据库的数据文件,配置文件,日志文件等复制一份到其他路径上,这种备份速度一般较快,因为只有I/O操作.进行物理备份时,一般都需要关闭mysql ...
- Java基础学习笔记十二 类、抽象类、接口作为方法参数和返回值以及常用API
不同修饰符使用细节 常用来修饰类.方法.变量的修饰符 public 权限修饰符,公共访问, 类,方法,成员变量 protected 权限修饰符,受保护访问, 方法,成员变量 默认什么也不写 也是一种权 ...
- Python学习笔记十二
HTML全称:Hyper Text Markup Language超文本标记语言 不是编程语言 HTML使用标记标签来描述网页 2. HTML标签 开始标签,结束标签. 例如:<html&g ...
随机推荐
- mybatis之一对一关联
MapperAsso.xml <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper ...
- MongoDB高级操作(2)
查询方法-常用查询方法 查询多条数据 --db.集合名称.find({条件文档}) 查询一条数据 --db.集合名称.findOne({条件文档}) 结果格式化 --pretty()方法 --db.集 ...
- 初征——NOIP2018游记
前言 从最初接触oi到今年noip到来,也已经将近有一年了.从对于程序一窍不懂到现在开始学习算法,只是短短的不到一年的时间罢了.这次noip,不仅仅是我oi生涯的第一次noip,更是相当于是对我这一年 ...
- bzoj 1050 [HAOI2006]旅行comf (并查集)
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1050 思路: 先将每条边的权值排个序优先小的,然后从小到大枚举每一条边,将其存到并查集 ...
- C++11 初始化
C++11 初始化 统一初始化语法 C++11新添加初始化列表 std::initializer_list<>类型,可以通过{}语法来构造初始化列表 .初始化列表是常数:一旦 ...
- MT【112】单变量化
评:降维,单变量是我们不懈的追求
- 自学huawei之路-AC6005-8AP添加授权码
返回自学Huawei之路 自学huawei之路-AC6005-8AP添加授权码
- 【转】安全加密(一):这些MCU加密方法你都知道吗?
本文导读 随着物联网和边缘计算的出现,五花八门的MCU也被应用其中,如何保证我们的程序安全和知识产权不受侵犯呢,本文我们将对主流MCU的程序加密进行讲解,希望能够帮助你选择最适合自己应用的微处理器. ...
- 前端学习 -- Css -- 内联元素的盒模型
内联元素不能设置width和height: 设置水平内边距,内联元素可以设置水平方向的内边距:padding-left,padding-right: 垂直方向内边距,内联元素可以设置垂直方向内边距,但 ...
- 数组初始化 memset fill
#include <cstdio> #include <cstdlib> #include <cmath> #include <cstring> #in ...