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 ...
随机推荐
- Spring之注入复杂类型属性
注入类: package helloworld; import java.util.List; import java.util.Map; import java.util.Properties; p ...
- robotframework 赋予临时id
有的时候用rf执行ui自动化测试脚本的时候,一直提示找不到元素 (前提是没有id) 那么这个时候 我们可以随便赋予一个临时id Assign Id To Element xpath=//*[ ...
- aop 切点匹配规则
- contentInsetAdjustmentBehavior各个值之间的区别
iOS11也出了不少时候了网上说适配的文章一大堆.关于contentInsetAdjustmentBehavior这个参数之间的区别,好像没什么人能说明.往下看的前提是你已经知道什么是安全区域,没看明 ...
- 初识Java Enum
enum 的全称为 enumeration, 是 JDK 1.5 中引入的新特性,存放在 java.lang 包中. enum是关键字,感觉它跟class.interface是并列的,并且不能跟fi ...
- 动态生成web表-asp.net table
1. 页面上定义一个server 的table <table style="width: 100%" id="tbContent" runat=" ...
- 解题:EXNR #1 金拱门
题面 大力统计题 考虑把和的平方拆开,最终就是许多对位置乘起来求和.所以考虑每对位置的贡献,对于$a_{i,j}$和$a_{k,h}(1<=i<=k<=n,1<=j<=h ...
- 在kubernetes集群中创建redis主从多实例
分类 > 正文 在kubernetes集群中创建redis主从多实例 redis-slave镜像制作 redis-master镜像制作 创建kube的配置文件yaml 继续使用上次实验环境 ht ...
- SQL2005分页存储过程(支持多表联接)
Code /********************************************************* * 作 用:数据分页(完整SQL分页存储过程(支持多表联接)) ...
- arcgis10.2连接表xlsx格式失败
需要安装 2007 Office System 驱动程序(AccessDatabaseEngine.exe)