使用值绑定来获取元素的值。值绑定可以应用于任何表单控件,但是有其他绑定可能更适合复选框,单选按钮和文本输入。

以下示例说明如何将绑定元素应用于多个表单输入字段,以及如何填充默认值:

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'" />

上面的示例将更改值更新以在按键时触发。可用选项包括输入,键盘,按键和后续处理。