Knockout.Js官網學習（value綁定）

前言

value綁定是關聯DOM元素的值到view model的屬性上。主要是用在表單控件<input>，<select>和<textarea>上。

當用戶編輯表單控件的時候， view model對應的屬性值會自動更新。一樣，當你更新view model屬性的時候，相對應的元素值在頁面上也會自動更新。

注：若是你在checkbox或者radio button上使用checked綁定來讀取或者寫入元素的 checked狀態，而不是value 值的綁定。

簡單示例

 代碼以下對兩個input進行value的屬性綁定

<p>Login name: <input data-bind="value: userName"/></p>
<p>Password: <input type="password" data-bind="value: userPassword"/></p>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>  
<script type="text/javascript">
    var viewModel = {
        userName: ko.observable(""),        
        userPassword: ko.observable("abc")
    };
    ko.applyBindings(viewModel);
</script> 

運行後效果爲

注意密碼的type爲password

KO設置此參數爲元素的value值。以前的值將被覆蓋。

    若是參數是監控屬性observable的，那元素的value值將根據參數值的變化而更新，若是不是，那元素的value值將只設置一次而且之後不在更新。

    若是你提供的參數不是一個數字或者字符串（而是對象或者數組）的話，那顯示的value值就是yourParameter.toString() 的內容（一般沒用，因此最好都設置爲數字或者字符串）。

    無論何時，只要你更新了元素的值，那 KO都會將view model對應的屬性值自動更新。默認狀況下當用戶離開焦點（例如onchange事件）的時候，KO才更新這個值，可是你能夠經過第2個參數valueUpdate來特別指定改變值的時機。

valueUpdate

  若是你使用valueUpdate參數，那就是意味着KO將使用自定義的事件而不是默認的離開焦點事件。下面是一些最經常使用的選項：

            「change」（默認值） - 當失去焦點的時候更新view model的值，或者是<select> 元素被選擇的時候。

            「keyup」 – 當用戶敲完一個字符之後當即更新view model。

            「keypress」 – 當用戶正在敲一個字符但沒有釋放鍵盤的時候就當即更新view model。不像 keyup，這個更新和keydown是同樣的。

            「afterkeydown」 – 當用戶開始輸入字符的時候就更新view model。主要是捕獲瀏覽器的keydown事件或異步handle事件。

        上述這些選項，若是你想讓你的view model進行實時更新，使用「afterkeydown」是最好的選擇。

<p>Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'"/></p>
<p>You have typed: <span data-bind="text: someValue"></span></p>

someValue: ko.observable("edit me")

綁定下拉菜單drop-down list（例如SELECT）

 Knockout對下拉菜單drop-down list綁定有一個特殊的支持，那就是在讀取和寫入綁定的時候，這個值能夠是任意JavaScript對象，而沒必要非得是字符串。在你讓你用戶選擇一組model對象的時候很是有用。具體例子，參考options綁定。

相似，若是你想建立一個multi-select list，參考selectedOptions綁定。

更新observable和non-observable屬性值

 若是你用value綁定將你的表單元素和你的observable屬性關聯起來，KO設置的2-way的雙向綁定，任何一方改變都會更新另一方的值。

 可是，若是你的元素綁定的是一個non-observable屬性（例如是一個原始的字符串或者JavaScript表達式） ,KO會這樣執行：

　　1.若是你綁定的non-observable屬性是簡單對象，例如一個常見的屬性值，KO會設置這個值爲form表單元素的初始值，若是你改變form表單元素的值，KO會將值從新寫回到view mode的這個屬性。但當這個屬性本身改變的時候，元素卻不會再變化了（由於不是observable的），因此它僅僅是1-way綁定。

　　2.若是你綁定的non-observable屬性是複雜對象，例如複雜的JavaScript 表達式或者子屬性，KO也會設置這個值爲form表單元素的初始值，可是改變form表單元素的值的時候，KO不會再寫會view model屬性，這種狀況叫one-time-only value setter，不是真正的綁定。

例如：

<p>First value: <input data-bind="value: firstValue"/></p>          <!-- two-way binding -->
<p>Second value: <input data-bind="value: secondValue"/></p>        <!-- one-way binding -->
<p>Third value: <input data-bind="value: secondValue.length"/></p>  <!-- no binding --> 

<script type="text/javascript">
    var viewModel = {
        firstValue: ko.observable("hello"), // Observable
        secondValue: "hello, again"// Not observable
    };
    ko.applyBindings(viewModel);
</script>