Knockout.Js官網學習（options綁定）

前言

options綁定控制什么樣的options在drop-down列表里（例如：<select>）或者 multi-select 列表里 （例如：<select size='6'>）顯示。此綁定不能用於<select>之外的元素。關聯的數據應是數組（或者是observable數組），<select>會遍歷顯示數組里的所有的項。

對於multi-select列表，設置或者獲取選擇的多項需要使用selectedOptions綁定。對於single-select列表，你也可以使用value綁定讀取或者設置元素的selected項。

Drop-down list

 

<p>Destination country: <select data-bind="options: availableCountries"></select></p>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>  
<script type="text/javascript">
    var viewModel = {        
        availableCountries: ko.observableArray(['France', 'Germany', 'Spain'])  
    };
    ko.applyBindings(viewModel);
    viewModel.availableCountries.push('China');
</script>

 

該參數是一個數組（或者observable數組）。對每個item，KO都會將它作為一個<option> 添加到<select>里，之前的options都將被刪除。

如果參數是一個string數組，那你不需要再聲明任何其它參數。<select>元素會將每個string顯示為一個option。不過，如果你讓用戶選擇的是一個JavaScript對象數組（不僅僅是string），那就需要設置optionsText和optionsValue這兩個參數了。

如果參數是監控屬性observable的，那元素的options項將根據參數值的變化而更新，如果不是，那元素的value值將只設置一次並且以后不在更新。

 

如果對上面的select UI元素加上multiple="true"

<select data-bind="options: availableCountries" multiple="true"></select>

這可以說是Multi-select list

Drop-down list展示的任意JavaScript對象，不僅僅是字符串

 

<p>Destination country: <select data-bind="options: availableCountries" multiple="true"></select></p>
<p>    Your country:   
    <select data-bind="options: Countries,optionsText: 'countryName', value: selectedCountry, optionsCaption: 'Choose...'">
    </select>
</p>
<div data-bind="visible: selectedCountry">
       You have chosen a country with population   
    <span data-bind="text: selectedCountry() ? selectedCountry().countryPopulation : 'unknown'"></span>.
</div>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>  
<script type="text/javascript">
    var Country = function (name, population) {
        this.countryName = name;
        this.countryPopulation = population;
    };
    var viewModel = {        
        availableCountries: ko.observableArray(['France', 'Germany', 'Spain']),
        selectedCountry: ko.observable(),
        Countries: ko.observableArray([
            new Country("UK", 65000000),
            new Country("USA", 320000000),
            new Country("Sweden", 29000000)
        ])
    };
    ko.applyBindings(viewModel);
    viewModel.availableCountries.push('China');
</script>

optionsCaption

有時候，默認情況下不想選擇任何option項。但是single-select drop-down列表由於每次都要默認選擇以項目，怎么避免這個問題呢？常用的方案是加一個“請選擇的”或者“Select an item”的提示語，或者其它類似的，然后讓這個項作為默認選項。

我們使用optionsCaption參數就能很容易實現，它的值是字符串型，作為默認項顯示。例如：

<select data-bind='options: myOptions, optionsCaption: "Select an item...", value: myChosenValue'></select>

KO會在所有選項上加上這一個項，並且設置value值為undefined。所以，如果myChosenValue被設置為undefined（默認是observable的），那么上述的第一個項就會被選中

Drop-down list展示的任意JavaScript對象，顯示text是function的返回值

<select data-bind="options: Countries,
                   optionsText: function(item) { return item.countryName + ' (pop: ' + item.countryPopulation + ')' },
                   value: selectedCountry,
                   optionsCaption: 'Choose...'">    
</select>

optionsText

上面《Drop-down list展示的任意JavaScript對象，不僅僅是字符串》中展示的綁定JavaScript對象到option上 – 不僅僅是字符串。這時候你需要設置這個對象的那個屬性作為drop-down列表或multi-select列表的text來顯示。設置額外的參數optionsText將對象的屬性名countryName作為顯示的文本。

如果不想僅僅顯示對象的屬性值作為每個item項的text值，那你可以設置optionsText 為JavaScript 函數，然后再函數里通過自己的邏輯返回相應的值（該函數參數為item項本身）。

optionsValue

和optionsText類似, 你也可以通過額外參數optionsValue來聲明對象的那個屬性值作為該<option>的value值。

經典場景：如在更新options的時候想保留原來的已經選擇的項。例如，當你重復多次調用Ajax獲取car列表的時候，你要確保已經選擇的某個car一直都是被選擇上，那你就需要設置optionsValue為“carId”或者其它的unique標示符，否則的話KO找不知道之前選擇的car是新options里的哪一項

selectedOptions

對於multi-select列表，你可以用selectedOptions讀取和設置多個選擇項。技術上看它是一個單獨的綁定，有自己的文檔，請參考： selectedOptions綁定。