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

1 <p>
2     Login name:
3     <input type="text" data-bind="value: loginName" />
4 </p>
5 
6 <p>
7     Password:
8     <input type="password" data-bind="value: password" />
9 </p>

 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，而不仅仅是字符串的值。更为详尽的内容可以参阅the options binding和the 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会更好一些。

 

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