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