KnockoutJS - 值繫結

此繫結用於將相應 DOM 元素的值連結到 ViewModel 屬性。大多數情況下，它用於input、select 和textarea等元素。這類似於文字繫結，區別在於，在值繫結中，資料可以被使用者更改，而 ViewModel 會自動更新它。

語法

value: <binding-value>

引數

HTML DOM 元素的 value 屬性被設定為引數值。之前的數值將被覆蓋。
如果引數是可觀察值，則元素值會在底層可觀察值更改時更新。如果未使用可觀察值，則元素僅處理一次。
valueUpdate 是一個額外的引數，也可以提供以獲得額外功能。當在繫結中使用 valueUpdate 引數時，KO 使用附加事件來檢測額外更改。以下是一些常見的事件：
- input - 當輸入元素的值更改時，ViewModel 會更新。
- keyup - 當用戶釋放按鍵時，ViewModel 會更新。
- keypress - 當用戶按下按鍵時，ViewModel 會更新。
- afterkeydown - 使用者開始輸入字元後，ViewModel 會持續更新。

示例

讓我們來看下面的例子，它演示了值繫結的用法。

線上演示

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Value Binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <p>Enter your name: 
         <input data-bind = "value: yourName, valueUpdate: 'afterkeydown'" />
      </p>
      
      <p>Your name is : <span data-bind = "text: yourName"></span></p>

      <script type = "text/javascript">
         function ViewModel () {
            this.yourName = ko.observable('');
         };

         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

輸出

讓我們執行以下步驟來了解上述程式碼的工作原理：

將上述程式碼儲存到value-bind.htm 檔案中。
在瀏覽器中開啟此 HTML 檔案。
由於使用了 valueUpdate，文字框中輸入的資料會立即更新。

觀察結果

立即接收來自輸入的值更新

如果希望輸入元素立即將更新傳遞給您的 ViewModel，請使用 textInput 繫結。考慮到瀏覽器的奇怪行為，它比 valueUpdate 選項更好。

處理下拉列表（<select> 元素）

KO 以特殊的方式支援下拉列表（<select> 元素）。值繫結和選項繫結協同工作，允許您讀取和寫入值，這些值是隨機的 JavaScript 物件，而不僅僅是字串值。

在 <select> 元素中使用 `valueAllowUnset`

使用此引數，可以將模型屬性設定為實際上在 select 元素中不存在的值。這樣，當用戶第一次檢視下拉列表時，可以將預設選項保留為空白。

示例

讓我們來看下面的例子，其中使用了 valueAllowUnset 選項。

線上演示

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Value Binding - working with drop-down lists</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <p>Select a City:
         <select data-bind = " options: cities,
            optionsCaption: 'Choose City...',
            value: selectedCity,
            valueAllowUnset: true"></select>
      </p>

      <script type = "text/javascript">
         function ViewModel() {
            this.cities = ko.observableArray(['Washington D.C.', 'Boston', 'Baltimore']);
            selectedCity = ko.observable('Newark')
         };
         
         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

輸出

讓我們執行以下步驟來了解上述程式碼的工作原理：

將上述程式碼儲存到value-bind-drop-down.htm 檔案中。
在瀏覽器中開啟此 HTML 檔案。
selectedCity 被賦予列表中不存在的值。這使得下拉列表在第一次顯示時為空白。

更新可觀察和不可觀察的屬性值

如果您使用 value 將表單元素連結到可觀察屬性，KO 能夠建立雙向繫結，以便它們之間的更改會在兩者之間交換。

如果您使用不可觀察屬性（簡單的字串或 JavaScript 表示式），則 KO 將執行以下操作：

如果您引用 ViewModel 上的簡單屬性，KO 會將表單元素的初始狀態設定為屬性值。如果更改了表單元素，則 KO 會將新值寫回屬性，但它無法檢測屬性中的任何更改，從而使其成為單向繫結。
如果您引用非簡單內容，例如比較結果或函式呼叫，則 KO 會將表單元素的初始狀態設定為該值，但無法寫入使用者對錶單元素所做的任何更改。我們可以將其稱為一次性值設定器。

示例

下面的程式碼片段顯示了可觀察和不可觀察屬性的用法。

<!-- Two-way binding. Populates textbox; syncs both ways. -->
<p>First value: <input data-bind="value: firstVal" /></p>

<!-- One-way binding. Populates textbox; syncs only from textbox to model. -->
<p>Second value: <input data-bind="value: secondVal" /></p>

<!-- No binding. Populates textbox, but doesn't react to any changes. -->
<p>Third value: <input data-bind="value: secondVal.length > 8" /></p>

<script type = "text/javascript">
   function viewModel() {
      firstVal =  ko.observable("hi there"),     // Observable
      secondVal = "Wats up!!!"                   // Not observable
   };
</script>

將值繫結與選中繫結一起使用

如果將值繫結與選中繫結一起包含，則值繫結將類似於 checkedValue 選項（可與選中繫結一起使用）。它將控制用於更新 ViewModel 的值。

knockoutjs_declarative_bindings.htm

列印頁面