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綁定。