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