"options" 绑定

options 绑定 只能用于<select> 元素上，用于控制下拉列表的显示，关联的数据应是数组（或者是observable数组），与下拉列表项对应。即：对于数组的每个元素，KO都会将它作为一个 <option> 添加到<select> 里。

基本用法

Html代码

<p>请选择所在国家: <select data-bind="options: availableCountries"></select></p>

var viewModel = {
	    availableCountries : ko.observableArray(['France', 'Germany', 'Spain']) 
	};
viewModel.availableCountries.push('China'); // Adds another option
ko.applyBindings(viewModel);

对于字符串数组，ko会将optionText 和optionValue 设为相同值。

多选列表用法

Html代码

<p>请选择所在国家: <select data-bind="options: availableCountries"  size="5" multiple="true"></select></p>

var viewModel = {
	    availableCountries : ko.observableArray(['France', 'Germany', 'Spain']) // These are the initial options
	};
viewModel.availableCountries.push('China'); // Adds another option
ko.applyBindings(viewModel);

options为对象数组用法

对于使用字符串数组，此时ko默认会将optionText 和optionValue设为相同值。如果我们想对二者单独设置，那么就需要建立个对象数组，然后配合ko的optionsText和optionsValue绑定即可。

另外，还可以配合value绑定来设置下拉列表的当前选定项。

Html代码

<p>
   选择所在国家:
   <select data-bind="options: availableCountries, optionsValue: 'countryPopulation', optionsText: 'countryName', value: selectedCountry, optionsCaption: '--请选择--'"></select>
</p>

    var country = function(name, population) {
	    this.countryName = name;
		this.countryPopulation = population;
	};
	
	var viewModel = {
	    availableCountries : ko.observableArray([
		    new country("UK", 65000000),
			new country("USA", 320000000),
			new country("Sweden", 29000000)
		]),
		selectedCountry : ko.observable("320000000")//设置"USA"为当前选定项
	};
	ko.applyBindings(viewModel);

"selectedOptions" 绑定

"selectedOptions"绑定是配合"options"绑定使用的，用于在多选列表中设置默认选定项。

Html代码

<p>
   <select data-bind="options: availableCountries, selectedOptions: chosenCountries" size="5" multiple="true"></select>
</p>
<a href="javascript:void(0)"  onClick="selectedNumber()">查看已选定项数量</a>

<script type="text/javascript">
    var viewModel = {
	    availableCountries : ko.observableArray(['France', 'Germany', 'Spain']),
		chosenCountries : ko.observableArray(['Germany'])
	};
	viewModel.chosenCountries.push('France'); 
	ko.applyBindings(viewModel);
</script>

<script type="text/javascript">
function selectedNumber(){    
    alert(viewModel.chosenCountries().length);
}
</script>

"uniqueName" 绑定

<input data-bind="value: someModelProperty, uniqueName: true" />