KnockoutJS 3.X API 第四章 表單綁定(9) value綁定

目的

value綁定主要用於DOM元素給視圖模型賦值用的。通常用於<input><select><textarea>等元素。

value綁定與text綁定的區別在於，value綁定中當用戶編輯表單控件相關值的時候，值會自動更新視圖模型的相關屬性值，當視圖模型的相關屬性值被更新后，表單中相關的value綁定也會隨之變化。

value綁定就像DOM和ViewModel的一個雙向通道。而text綁定只是ViewModel到DOM的單向通道。

例如：

<p>Login name: <input data-bind="value: userName" /></p>
<p>Password: <input type="password" data-bind="value: userPassword" /></p>
 
<script type="text/javascript">
    var viewModel = {
        userName: ko.observable(""),        // Initially blank
        userPassword: ko.observable("abc"), // Prepopulate
    };
</script>

一些細節

主要技術細節：

1. KO將會使用初始值設置value綁定的元素。當有新的值的時候，初始值將被覆蓋
2. 如果value綁定的是監控屬性，那么之后的屬性值更新就會被體現在DOM的value綁定上，如果不是監控屬性，則只有第一次運行會更新DOM上的value綁定的值，之后就不會再變了。
3. 如果你的value綁定不是數值型或字符型數據(例如一個對象或數組)，那顯示的文本內容將等同於yourParameter.toString()。最好還是綁定值型或字符型數據。
4. 當用戶編輯表單控件修改基於value綁定的元素值並移出焦點后，KO就會自動更新對應的視圖模型的屬性值，你也可以通過使用valueUpdate事件來控制。

其他技術細節：

1. valueUpdate，KO定義了一系列的change事件，最常用包括如下事件：
   • "input"-<input>或<textarea>元素的變化更新您的視圖模型時的值。
   • "keyup" - 當用戶釋放某個鍵更新您的視圖模型
   • "keypress"-當用戶輸入一個值更新您的視圖模型。不像keyup，這個會反復更新
   • "afterkeydown"-當用戶開始輸入一個字符盡快更新您的視圖模型。這通過捕獲瀏覽器的keydown事件，並異步處理該事件。這個事件在一些移動客戶端可能不會起什么作用。
2. valueAllowUnset，適用於<select>的value綁定，其他元素不起作用，具體請參考之后的備注2.

備注1：實時更新

如果你想要實時更新<input>或者<textarea>到你的視圖模型，可以使用textInput綁定。具體的textInput細節將在之后的章節提到。

備注2：下拉列表<select>的綁定

KO在下拉列表綁定中，需要使用value綁定和options綁定(options綁定將在以后的章節中提到)。

使用valueAllowUnset與<select>元素

Select a country:

源碼：

<p>
    Select a country:
    <select data-bind="options: countries,
                       optionsCaption: 'Choose one...',
                       value: selectedCountry,
                       valueAllowUnset: true"></select>
</p>
 
<script type="text/javascript">
    var viewModel = {
        countries: ['Japan', 'Bolivia', 'New Zealand'],
        selectedCountry: ko.observable('Latvia')
    };
</script>

有很多時候，我們希望下拉列表中包含一個空白的或者沒有包含在數據集合中的元素，比如choose one…，那么就可以使用valueAllowUnset:true來帶到目的。如上述例子一樣。

selectedCountry將保留Latvia，並將下拉列表中空白匹配給它。

備注3：綁定監控屬性和非監控屬性

如果你使用value綁定的是一個監控屬性，KO是能夠建立一個雙向綁定。

但是如果value綁定是一個非監控屬性，則KO會進行以下處理：

• 如果引用一個簡單的屬性，也就是說，它只是在你的視圖模型一個普通的屬性，表單元素編輯時KO將設置表單元素的初始狀態屬性值。

例如：

First value:

First value:

Second value:

Second value:

Third value:

源碼：

<p>First value: <input data-bind="value: firstValue"></p>
<p>First value:<span data-bind="text:firstValue"></span></p>
<!-- One-way binding. Populates textbox; syncs only from textbox to model. -->
<p>Second value: <input data-bind="value: secondValue"></p>
<p>Second value: <span data-bind="text: secondValue"></span></p>
<!-- No binding. Populates textbox, but doesn't react to any changes. -->
<p>Third value: <input data-bind="value: secondValue.length &gt; 8"></p>
<script type="text/javascript">
    var viewModel = {
        firstValue: ko.observable("hello"), // Observable
        secondValue: "hello, again"         // Not observable
    };
    ko.applybindings(viewModel,document.getElementById("eq2"));
</script>