“hasFocus”綁定
hasFocus綁定器會將DOM元素的焦點狀態與視圖模型中的屬性相關聯，當你設置視圖模型中關聯的屬性為true或false后，將能夠設置關鍵的DOM元素是否獲得焦點。
比如下面的例子將會演示如何使用通過代碼設置焦點，並且當關聯的標簽獲得焦點后顯示一段文本：
1 <div> 2 <input type="text" data-bind="hasfocus: focusState" /> 3 <button type="button" data-bind="click:setFocus" >set focus</button> 4 <span data-bind="visible:focusState" >the text box has focus</span> 5 </div> 6 7 8 <script type="text/javascript"> 9 10 var appViewModel = function () { 11 var self = this; 12 this.focusState = ko.observable(false); 13 this.setFocus = function () { 14 self.focusState(true); 15 }; 16 } 17 18 ko.applyBindings(new appViewModel()); 19 </script>
“checked”綁定
“checked”綁定器用來關聯checkable表單控件，比如復選框和單選框。
比如下面的列子可以判斷用戶是否勾選了這個復選框：
1 <div> 2 <input type="checkbox" data-bind="checked: isChecked" /> 3 </div> 4 <div> 5 <button type="button" data-bind="click:setFocus">勾選</button> 6 </div> 7 8 9 <script type="text/javascript"> 10 11 var appViewModel = function () { 12 var self = this; 13 this.isChecked = ko.observable(false); 14 this.setFocus = function () { 15 self.isChecked(true); 16 }; 17 } 18 19 ko.applyBindings(new appViewModel()); 20 </script>
再復雜些就是可以將用戶勾選的值組成數組，比如下面的例子：
1 <div> 2 <input type="checkbox" value="a" data-bind="checked: CheckArray" /> 3 <input type="checkbox" value="b" data-bind="checked:CheckArray" /> 4 <input type="checkbox" value="c" data-bind="checked:CheckArray" /> 5 </div> 6 <div> 7 <button type="button" data-bind="click:showChecked">show checked</button> 8 </div> 9 10 11 <script type="text/javascript"> 12 13 var appViewModel = function () { 14 var self = this; 15 this.CheckArray = ko.observableArray(['a','b']); 16 this.showChecked = function () { 17 alert(self.CheckArray().toString()); 18 }; 19 } 20 21 ko.applyBindings(new appViewModel()); 22 </script>
當然不僅僅只有復選，在單選的情況下只會將選擇的元素的value值更新到視圖模型中去，比如下面的例子所示：
1 <div> 2 <input type="radio" name="1" value="a" data-bind="checked: CheckEle" /> 3 <input type="radio" name="1" value="b" data-bind="checked: CheckEle" /> 4 <input type="radio" name="1" value="c" data-bind="checked: CheckEle" /> 5 </div> 6 <div> 7 <button type="button" data-bind="click:showChecked">show checked</button> 8 </div> 9 10 11 <script type="text/javascript"> 12 13 var appViewModel = function () { 14 var self = this; 15 this.CheckEle = ko.observable('a'); 16 this.showChecked = function () { 17 alert(self.CheckEle()); 18 }; 19 } 20 21 ko.applyBindings(new appViewModel()); 22 </script>
如果你不想用value那個值，可以加上checkedValue屬性，這樣更新到視圖模型中的值就是checkedValue指定的值。比如下面這樣：
1 <div> 2 <input type="radio" name="1" value="a" data-bind="checkedValue:'s', checked: CheckEle" /> 3 <input type="radio" name="1" value="b" data-bind="checkedValue: 'd', checked: CheckEle" /> 4 <input type="radio" name="1" value="c" data-bind="checkedValue: 'e', checked: CheckEle" /> 5 </div> 6 <div> 7 <button type="button" data-bind="click:showChecked">show checked</button> 8 </div>
“options”綁定
“options”綁定器控制在下拉列表中顯示的項，比如<select>單選或者<select size=’6’ >多選，但是該綁定器不能在除了<select>標簽使用。
指定關聯的值必須是一個數組或者監控數組，ko會將這些數組中的項作為<select>的option顯示。
比如下面的例子，會將數組中的值全部顯示，同時我們還可以在此之后增加新的值到數組中，ko一樣會更新：
1 <div> 2 <select data-bind="options:dropOptions" ></select> 3 </div> 4 <div> 5 <input type="text" data-bind="value:newOption" /> 6 <button type="button" data-bind="click: addNewOptions">add new item</button> 7 </div> 8 9 10 <script type="text/javascript"> 11 12 var appViewModel = function () { 13 var self = this; 14 this.dropOptions = ko.observableArray(['a', 'b', 'c', 'd']); 15 this.newOption = ko.observable(); 16 this.addNewOptions = function () { 17 self.dropOptions.push(self.newOption()); 18 self.newOption(''); 19 } 20 } 21 22 ko.applyBindings(new appViewModel()); 23 </script>
當然對於多選也一樣可以應付：
1 <div> 2 <select size="3" multiple="multiple" data-bind="options:dropOptions" ></select> 3 </div>
當然一定會有人問如何獲取選擇的項，這里我們可以用value綁定器，比如下面的代碼將第一個例子改寫，能夠顯示選擇的值：
1 <div> 2 <select data-bind="options:dropOptions,value:selectedOption" ></select> 3 </div> 4 <div> 5 <input type="text" data-bind="value:newOption" /> 6 <button type="button" data-bind="click: addNewOptions">add new item</button> 7 <button type="button" data-bind="click: showSelectOption">show selected value</button> 8 </div> 9 10 11 <script type="text/javascript"> 12 13 var appViewModel = function () { 14 var self = this; 15 this.dropOptions = ko.observableArray(['a', 'b', 'c', 'd']); 16 this.newOption = ko.observable(); 17 this.selectedOption = ko.observable(); 18 this.addNewOptions = function () { 19 self.dropOptions.push(self.newOption()); 20 self.newOption(''); 21 }, 22 this.showSelectOption = function () { 23 alert(self.selectedOption()); 24 } 25 } 26 27 ko.applyBindings(new appViewModel()); 28 </script>
如果是多選我們可以將value關聯的屬性改成監控數組，那么就可以解決這個問題了，但是上面僅僅只是簡單的數組，實際的開發過程中可能是一個對象組成的數組，而我們也要將其顯示到下拉中，當然options綁定一樣可以辦到，比如下面的例子：
1 <div> 2 <select data-bind="options:dropOptions,value:selectedOption,optionsCaption:'choose...',optionsText:'text',optionsValue:'value'" ></select> 3 </div> 4 <div> 5 <button type="button" data-bind="click: showSelectOption">show selected value</button> 6 </div> 7 8 9 <script type="text/javascript"> 10 var ObjectArray = function (text, value) { 11 this.text = text; 12 this.value = value; 13 } 14 15 var appViewModel = function () { 16 var self = this; 17 this.dropOptions = ko.observableArray([new ObjectArray('a', 1), new ObjectArray('b', 2), new ObjectArray('c', 1)]); 18 this.selectedOption = ko.observable(); 19 this.showSelectOption = function () { 20 alert(self.selectedOption()); 21 } 22 } 23 24 ko.applyBindings(new appViewModel()); 25 </script>
這里我們通過optionsCaption是用來顯示提示的，optionsText是用來指定用於作為下拉顯示的屬性名稱，這里我們指定的是text，而optionsValue則是指定用於作為value的屬性名稱，我們指定的是value，那么當我們選擇一項之后，點擊顯示，則顯示的是value的值而不是text的值，當然optionsText也可以傳給它一個函數，那么ko會將數組中的當前項作為第一個參數傳遞給這個函數，當然這個函數也要返回用於顯示的文字。
還有一些其他參數如下：
optionsIncludeDestroyed：是否顯示數組中已經會設置為刪除標記的項，默認是不顯示的。
optionsAfterRender：當一個項顯示之后調用該函數，可以同來執行一些自定義的方法。
selectedOptions：用於多選的情況，用來關聯選擇的項。關聯到視圖模型中的屬性類型需要為數組，並且在通過push和pop操作該數組的同時，下拉中選擇的項也會跟着變動。
valueAllowUnset：當你指定的value不存在於下拉項中的時候，下拉將顯示空白，如果未設置該屬性為true則會將value關聯的屬性設置為undefined，同時下拉會顯示optionCaption指定的字符串。
“uniqueName”綁定
這個綁定器很簡單，就是用來給name屬性生成一個標識符。