值
使用值繫結來獲取元素的值。值繫結可以應用於任何表單控制元件,但是有其他繫結可能更適合核取方塊,單選按鈕和文字輸入。
以下示例說明如何將繫結元素應用於多個表單輸入欄位,以及如何填充預設值:
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'" />
上面的示例將更改值更新以在按鍵時觸發。可用選項包括輸入,鍵盤,按鍵和後續處理。