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 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会更好一些。

上一篇:[Java] SSH框架笔记_S2SH整合步骤


下一篇:RabbitMQ入门_11_DLX