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创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
js检验密码强度(低中高)附图
Jun 05 Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
jquery.mobile 共同布局遇到的问题小结
Feb 10 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 Javascript
angularjs使用directive实现分页组件的示例
Feb 07 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
解决Layui中layer报错的问题
Sep 03 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
兼容性比较好的PHP生成缩略图的代码
2011/01/12 PHP
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
JavaScript 注册事件代码
2011/01/27 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
numpy中索引和切片详解
2017/12/15 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
实时获取Python的print输出流方法
2019/01/07 Python
Django 权限认证(根据不同的用户,设置不同的显示和访问权限)
2019/07/24 Python
Python实现时间序列可视化的方法
2019/08/06 Python
python科学计算之numpy——ufunc函数用法
2019/11/25 Python
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
澳大利亚最好的电动自行车:Leon Cycle
2020/12/19 全球购物
会计专业自我评价
2014/02/12 职场文书
普通简短的个人自我评价
2014/02/15 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
张丽莉观后感
2015/06/16 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书
python使用torch随机初始化参数
2022/03/22 Python