使用值繫結來獲取元素的值。值繫結可以應用於任何表單控制元件,但是有其他繫結可能更適合核取方塊,單選按鈕和文字輸入。

以下示例說明如何將繫結元素應用於多個表單輸入欄位,以及如何填充預設值:

ViewModel 定義:

var MyViewModel = function(){
    var self = this;
  //Initialize valueOne
  self.valueOne = ko.observable();
  //Initialize valueTwo with a default value of "Value two"
  self.valueTwo = ko.observable("Value two");
  //Initialize the color dropdown, and by default, select the "blue" option
  self.color = ko.observable("blue");
  
  self.valueOne.subscribe(function(newValue){
      console.log("valueOne: " + newValue);
  });
  
  self.valueTwo.subscribe(function(newValue){
      console.log("valueTwo: " + newValue);
  });
  
  self.color.subscribe(function(newValue){
      console.log("color: " + newValue);
  });
}

相關標記:

<input type="text" data-bind="value: valueOne" />
<input type="text" data-bind="value: valueTwo" />

<select data-bind="value: color">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

在上面的示例中,當值更改時,新值將記錄到控制檯。初始值不會觸發更改事件。

預設情況下,值繫結將更改定義為元素值的更改,並將焦點轉移到另一個元素。可以使用 valueUpdate 選項更改此設定:

<input type="text" data-bind="value: valueOne, valueUpdate: 'keyup'" />

上面的示例將更改值更新以在按鍵時觸發。可用選項包括輸入,鍵盤,按鍵和後續處理。