博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
KnockoutJs学习笔记(十二)
阅读量:4709 次
发布时间:2019-06-10

本文共 1981 字,大约阅读时间需要 6 分钟。

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部分:

1 

2 Login name:3 4

5 6

7 Password:8 9

 js部分:

1 function MyViewModel() {2     var self = this;3 4     self.loginName = ko.observable("");5     self.password = ko.observable("1qaz");6 }7 8 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,而不仅仅是字符串的值。更为详尽的内容可以参阅和。这里还涉及到另一个参数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会更好一些。

 

转载于:https://www.cnblogs.com/charlieyuki/p/3939154.html

你可能感兴趣的文章
httpclient设置proxy与proxyselector
查看>>
IT常用单词
查看>>
拓扑排序
查看>>
NYOJ--32--SEARCH--组合数
查看>>
gulpfile 压缩模板
查看>>
【34.14%】【BZOJ 3110】 [Zjoi2013]K大数查询
查看>>
【 henuacm2016级暑期训练-动态规划专题 A 】Cards
查看>>
第五篇:白话tornado源码之褪去模板的外衣
查看>>
设备常用框架framework
查看>>
bootstrap模态框和select2合用时input无法获取焦点(转)
查看>>
MockObject
查看>>
BZOJ4516: [Sdoi2016]生成魔咒(后缀自动机)
查看>>
查看手机已经记住的WIFI密码
查看>>
最新版IntelliJ IDEA2019 破解教程(2019.08.07-情人节更新)
查看>>
C# 两个datatable中的数据快速比较返回交集或差集
查看>>
关于oracle样例数据库emp、dept、salgrade的mysql脚本复杂查询分析
查看>>
adb shell am 的用法
查看>>
iOS10 UI教程视图和子视图的可见性
查看>>
FindChildControl与FindComponent
查看>>
中国城市json
查看>>