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 bindingthe 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学习笔记(十二)的更多相关文章

  1. python3.4学习笔记(十二) python正则表达式的使用,使用pyspider匹配输出带.html结尾的URL

    python3.4学习笔记(十二) python正则表达式的使用,使用pyspider匹配输出带.html结尾的URL实战例子:使用pyspider匹配输出带.html结尾的URL:@config(a ...

  2. Go语言学习笔记十二: 范围(Range)

    Go语言学习笔记十二: 范围(Range) rang这个关键字主要用来遍历数组,切片,通道或Map.在数组和切片中返回索引值,在Map中返回key. 这个特别像python的方式.不过写法上比较怪异使 ...

  3. java jvm学习笔记十二(访问控制器的栈校验机制)

    欢迎装载请说明出处:http://blog.csdn.net/yfqnihao 本节源码:http://download.csdn.net/detail/yfqnihao/4863854 这一节,我们 ...

  4. (C/C++学习笔记) 十二. 指针

    十二. 指针 ● 基本概念 位系统下为4字节(8位十六进制数),在64位系统下为8字节(16位十六进制数) 进制表示的, 内存地址不占用内存空间 指针本身是一种数据类型, 它可以指向int, char ...

  5. Python学习笔记(十二)—Python3中pip包管理工具的安装【转】

    本文转载自:https://blog.csdn.net/sinat_14849739/article/details/79101529 版权声明:本文为博主原创文章,未经博主允许不得转载. https ...

  6. ROS学习笔记十二:使用gazebo在ROS中仿真

    想要在ROS系统中对我们的机器人进行仿真,需要使用gazebo. gazebo是一种适用于复杂室内多机器人和室外环境的仿真环境.它能够在三维环境中对多个机器人.传感器及物体进行仿真,产生实际传感器反馈 ...

  7. JavaScript权威设计--命名空间,函数,闭包(简要学习笔记十二)

    1.作为命名空间的函数 有时候我们需要声明很多变量.这样的变量会污染全局变量并且可能与别人声明的变量产生冲突. 这时.解决办法是将代码放入一个函数中,然后调用这个函数.这样全局变量就变成了 局部变量. ...

  8. MySQL学习笔记十二:数据备份与恢复

    数据备份 1.物理备份与逻辑备份 物理备份 物理备份就是将数据库的数据文件,配置文件,日志文件等复制一份到其他路径上,这种备份速度一般较快,因为只有I/O操作.进行物理备份时,一般都需要关闭mysql ...

  9. Java基础学习笔记十二 类、抽象类、接口作为方法参数和返回值以及常用API

    不同修饰符使用细节 常用来修饰类.方法.变量的修饰符 public 权限修饰符,公共访问, 类,方法,成员变量 protected 权限修饰符,受保护访问, 方法,成员变量 默认什么也不写 也是一种权 ...

  10. Python学习笔记十二

    HTML全称:Hyper Text Markup Language超文本标记语言 不是编程语言 HTML使用标记标签来描述网页 2.  HTML标签 开始标签,结束标签.  例如:<html&g ...

随机推荐

  1. 【模板】Floyd

    int n; ][MAX_N + ]; void Floyd() { ; k <= n; ++k) { ; i <= n; ++i) { ; j <= n; ++j) { d[i][ ...

  2. Eclipse 使用 VS快捷键

    这里楼主也是尝试了,只能说一般吧.还是有许多没有改过来... 想要尝试的朋友,可以试试. 首先进入Eclipse 然后 接着 Name:CDT Location:http://download.ecl ...

  3. 【转】#pragma的用法

    在所有的预处理指令中,#Pragma 指令可能是最复杂的了,它的作用是设定编译器的状态或者是指示编译器完成一些特定的动作.#pragma指令对每个编译器给出了一个方法,在保持与C和C++语言完全兼容的 ...

  4. POJ 3281 Dining (网络流)

    POJ 3281 Dining (网络流) Description Cows are such finicky eaters. Each cow has a preference for certai ...

  5. HDU 6181 第k短路

    Two Paths Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 153428/153428 K (Java/Others)Total ...

  6. git 创建空提交

    git commit --allow-empty -m "Empty Commit to setup deployments"

  7. eos节点启动源码分析

    在eos源码目录中programs/nodeos/main.cpp文件里,为节点启动的主函数main函数内部做了两件事1 初始化 application if(!app().initialize< ...

  8. Python学习笔记 - 实现探测Web服务质量

    #!/usr/bin/python3# _*_ coding:utf-8 _*_import sys, osimport timeimport pycurl url = "https://d ...

  9. 安装【Jenkins】

    前言      jenkins的一款持续集成工具,      它可以做的事情很多,其中一个主要的功能就是简化部署流程          回想一下我们的发布流程:           1.本地把项目打包 ...

  10. Java基础-JAVA中常见的数据结构介绍

    Java基础-JAVA中常见的数据结构介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.什么是数据结构 答:数据结构是指数据存储的组织方式.大致上分为线性表.栈(Stack) ...