KnockoutJS 3.X API 第四章之表单value绑定


Posted in Javascript onOctober 10, 2016

Knockout是一个以数据模型(data model)为基础的能够帮助你创建富文本,响应显示和编辑用户界面的JavaScript类库。任何时候如果你的UI需要自动更新(比如:更新依赖于用户的行为或者外部数据源的改变),KO能够很简单的帮你实现并且很容易维护。

重要特性:

优雅的依赖追踪 - 不管任何时候你的数据模型更新,都会自动更新相应的内容。

声明式绑定 - 浅显易懂的方式将你的用户界面指定部分关联到你的数据模型上。

轻易可扩展 - 几行代码就可以实现自定义行为作为新的声明式绑定。

额外的好处:

纯JavaScript类库 ? 兼容任何服务器端和客户端技术

可添加到Web程序最上部 ? 不需要大的架构改变

简洁的 - Gzip之前大约25kb

兼容任何主流浏览器 - (IE 6+、Firefox 2+、Chrome、Safari、其它)

采用行为驱动开发 - 意味着在新的浏览器和平台上可以很容易通过验证。

目的

value绑定主要用于DOM元素给视图模型赋值用的。通常用于<input><select><textarea>等元素。

value绑定与text绑定的区别在于,value绑定中当用户编辑表单控件相关值的时候,值会自动更新视图模型的相关属性值,当视图模型的相关属性值被更新后,表单中相关的value绑定也会随之变化。

value绑定就像DOM和ViewModel的一个双向通道。而text绑定只是ViewModel到DOM的单向通道。

例如:

<p>Login name: <input data-bind="value: userName" /></p>
<p>Password: <input type="password" data-bind="value: userPassword" /></p>
<script type="text/javascript">
var viewModel = {
userName: ko.observable(""), // Initially blank
userPassword: ko.observable("abc"), // Prepopulate
};
</script>

一些细节

主要技术细节:

KO将会使用初始值设置value绑定的元素。当有新的值的时候,初始值将被覆盖
如果value绑定的是监控属性,那么之后的属性值更新就会被体现在DOM的value绑定上,如果不是监控属性,则只有第一次运行会更新DOM上的value绑定的值,之后就不会再变了。

如果你的value绑定不是数值型或字符型数据(例如一个对象或数组),那显示的文本内容将等同于yourParameter.toString()。最好还是绑定值型或字符型数据。

当用户编辑表单控件修改基于value绑定的元素值并移出焦点后,KO就会自动更新对应的视图模型的属性值,你也可以通过使用valueUpdate事件来控制。

其他技术细节:

valueUpdate,KO定义了一系列的change事件,最常用包括如下事件:

"input"-<input>或<textarea>元素的变化更新您的视图模型时的值。

"keyup" - 当用户释放某个键更新您的视图模型

"keypress"-当用户输入一个值更新您的视图模型。不像keyup,这个会反复更新

"afterkeydown"-当用户开始输入一个字符尽快更新您的视图模型。这通过捕获浏览器的keydown事件,并异步处理该事件。这

个事件在一些移动客户端可能不会起什么作用。

valueAllowUnset,适用于<select>的value绑定,其他元素不起作用,具体请参考之后的备注2.

备注1:实时更新

如果你想要实时更新<input>或者<textarea>到你的视图模型,可以使用textInput绑定。具体的textInput细节将在之后的章节提到。

备注2:下拉列表<select>的绑定

KO在下拉列表绑定中,需要使用value绑定和options绑定(options绑定将在以后的章节中提到)。

使用valueAllowUnset与<select>元素

KnockoutJS 3.X API 第四章之表单value绑定

Select a country:

源码:

<p>
Select a country:
<select data-bind="options: countries,
optionsCaption: 'Choose one...',
value: selectedCountry,
valueAllowUnset: true"></select>
</p>
<script type="text/javascript">
var viewModel = {
countries: ['Japan', 'Bolivia', 'New Zealand'],
selectedCountry: ko.observable('Latvia')
};
</script>

有很多时候,我们希望下拉列表中包含一个空白的或者没有包含在数据集合中的元素,比如choose one…,那么就可以使用valueAllowUnset:true来带到目的。如上述例子一样。

selectedCountry将保留Latvia,并将下拉列表中空白匹配给它。

备注3:绑定监控属性和非监控属性

如果你使用value绑定的是一个监控属性,KO是能够建立一个双向绑定。

但是如果value绑定是一个非监控属性,则KO会进行以下处理:

如果引用一个简单的属性,也就是说,它只是在你的视图模型一个普通的属性,表单元素编辑时KO将设置表单元素的初始状态属性值。

例如:

First value:
hello
First value:hello
Second value:
hello, again
Second value: hello, again
Third value:
true

KnockoutJS 3.X API 第四章之表单value绑定

源码:

<p>First value: <input data-bind="value: firstValue"></p>
<p>First value:<span data-bind="text:firstValue"></span></p>
<!-- One-way binding. Populates textbox; syncs only from textbox to model. -->
<p>Second value: <input data-bind="value: secondValue"></p>
<p>Second value: <span data-bind="text: secondValue"></span></p>
<!-- No binding. Populates textbox, but doesn't react to any changes. -->
<p>Third value: <input data-bind="value: secondValue.length > 8"></p>
<script type="text/javascript">
var viewModel = {
firstValue: ko.observable("hello"), // Observable
secondValue: "hello, again" // Not observable
};
ko.applybindings(viewModel,document.getElementById("eq2"));
</script>

以上所述是小编给大家介绍的KnockoutJS 3.X API 第四章之表单value绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
深入认识JavaScript中的函数
Jan 22 Javascript
jQuery中调用WebService方法小结
Mar 28 Javascript
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 Javascript
js格式化输入框内金额、银行卡号
Feb 01 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 Javascript
详解升级react-router 4 踩坑指南
Aug 14 Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 Javascript
用node.js写一个jenkins发版脚本
May 21 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 #Javascript
浅谈jquery中使用canvas的问题
Oct 10 #Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 #Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 #Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 #Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 #Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 #Javascript
You might like
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
2011/01/17 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
浅谈Vue.js
2017/03/02 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
python中sys.argv参数用法实例分析
2015/05/20 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
python应用文件读取与登录注册功能
2019/09/23 Python
python selenium xpath定位操作
2020/09/01 Python
用python计算文件的MD5值
2020/12/23 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
如何使用PHP session
2015/04/21 面试题
95%的面试官都会问到的50道Java线程题,附答案
2012/08/03 面试题
办公室年终个人自我评价
2013/10/28 职场文书
预备党员党校学习自我评价分享
2013/11/12 职场文书
中学生爱国演讲稿
2013/12/31 职场文书
音乐教学反思
2014/02/02 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
追悼会主持词
2014/03/20 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
商务司机岗位职责
2015/04/10 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
Python中with上下文管理协议的作用及用法
2022/03/18 Python
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android