KnockoutJS 3.X API 第四章 表單綁定(11) options綁定


目的

options綁定主要用於下拉列表中(即<select>元素)或多選列表(例如,<select size='6'>)。此綁定不能與除<select>元素之外的任何其他元素一起使用。

其值應該是一個數組(或監控屬性數組)。

注意:對於多選列表,設置該選項被選中,或讀取其中被選中的選項,需要使用的selectedOptions綁定。對於單選擇列表,可以結合value綁定讀取和寫入選定的選項的。。

示例1:下拉列表

Destination country:

源碼:

<p>
    Destination country:
    <select data-bind="options: availableCountries"></select>
</p>
 
<script type="text/javascript">
    var viewModel = {
        // These are the initial options
        availableCountries: ko.observableArray(['France', 'Germany', 'Spain'])
    };
 
    // ... then later ...
    viewModel.availableCountries.push('China'); // Adds another option
</script>

示例2:多選列表

Choose some countries you would like to visit:

源碼:

<p>
    Choose some countries you would like to visit:
    <select data-bind="options: availableCountries" size="5" multiple="true"></select>
</p>
 
<script type="text/javascript">
    var viewModel = {
        availableCountries: ko.observableArray(['France', 'Germany', 'Spain'])
    };
</script>

示例3:任意JS對象的下拉列表

Your country:

You have chosen a country with population .

源碼:

<p>
    Your country:
    <select data-bind="options: availableCountries,
                       optionsText: 'countryName',
                       value: selectedCountry,
                       optionsCaption: 'Choose...'"></select>
</p>
 
<div data-bind="visible: selectedCountry"> <!-- Appears when you select something -->
    You have chosen a country with population
    <span data-bind="text: selectedCountry() ? selectedCountry().countryPopulation : 'unknown'"></span>.
</div>
 
<script type="text/javascript">
    // Constructor for an object with two properties
    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() // Nothing selected by default
    };
</script>

示例4:任意JS對象的下拉列表並以計算的方式顯示文本

源碼:

<!-- Same as example 3, except the <select> box expressed as follows: -->
<select data-bind="options: availableCountries,
                   optionsText: function(item) {
                       return item.countryName + ' (pop: ' + item.countryPopulation + ')'
                   },
                   value: selectedCountry,
                   optionsCaption: 'Choose...'">
</select>

備注,示例4與示例3的唯一區別在於optionsText的顯示方式。

參數

  • optionsCaption

    有時候,你可能不希望默認選擇選中任何特定選項。但單選擇下拉列表中通常選擇一些默認項目啟動,因此,如何避免預選的東西,通常的解決方法是用一個特殊的虛擬選項,只是寫着“選擇項”或“請選擇一個選項”或類似的東西,並具有在默認情況下選擇了一個前綴的選項列表。

    這很容易做到:只需添加額外的參數有名字optionsCaption,它的值是顯示一個字符串。例如:

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

    KO會前綴一個顯示文本的項目列表“選擇項目...”它的值是undefined。因此,如果myChosenValue保持值undefined,則虛設選項將被選中。如果optionsCaption參數是監控屬性,則初始項目的文本將根據監控屬性值的變化而變化。

  • optionsText

    見上面的示例3,在這種情況下,你需要選擇該對象的屬性應顯示為下拉列表或多選列表的文本。示例3顯示了如何可以通過傳遞一個額外的參數指定屬性名optionsText

    如果你不希望下拉列表中的每個項目顯示的只是一個簡單的屬性值的文本,你可以給optionsText選項傳遞一個JavaScript函數,並提供您自己任意的邏輯在表示對象的條件計算顯示的文本。如示例4。

  • optionsValue

    類似optionsText,您還可以傳遞一個名為optionsValue的附加參數,以指定應使用哪些對象屬性來設置KO生成的<option>元素上的value屬性。 您還可以指定JavaScript函數來確定此值。 此函數將接收所選項作為其唯一參數,並應返回用於<option>元素的value屬性的字符串。

    通常,您只想使用optionsValue作為一種確保KO在更新可用選項集時正確保留選擇的方法。 例如,如果您通過Ajax調用重復獲取“car”對象的列表,並且想要確保所選擇的汽車被保留,您可能需要將optionsValue設置為“carId”或每個“car”對象具有的唯一標識符 ,否則KO不一定知道先前的“汽車”對象中的哪一個對應於新集合中的項目。

  • optionsIncludeDestroyed

    有時你可能想將一個數組條目標記為已刪除,但實際上沒有真的刪除。 這被稱為非破壞性刪除。

    默認情況下,選項綁定將跳過(即隱藏)標記為已銷毀的任何數組條目。 如果要顯示已銷毀的條目,請指定此附加參數,例如:

    <select data-bind='options: myOptions, optionsIncludeDestroyed: true'></select>

  • optionsAfterRender

    如果需要在生成的選項元素上運行一些自定義邏輯,可以使用optionsAfterRender回調。 見下文注2。

  • selectedOptions

    對於多選列表,可以使用selectedOptions讀取和寫入所選狀態。 技術上這是一個單獨的綁定,你可以參考下一節的selectedOptions綁定。

  • valueAllowUnset

    如果你想讓Knockout允許你的模型屬性獲取在你的<select>元素沒有相應條目的值(並通過使<select>元素為空,顯示這個值),然后參見第四章 value綁定的valueAllowUnset

備注1:設置/更改選項時保留選擇

當選項綁定更改您的<select>元素中的選項集時,KO將盡可能不改變用戶的選擇。 因此,對於單選擇下拉列表,仍將選擇先前選擇的選項值,而對於多選列表,仍將選擇所有先前選擇的選項值(除非您已刪除 一個或多個選項)。

這是因為選項綁定試圖獨立於值綁定(控制單選列表的選擇)和selectedOptions綁定(控制多選列表的選擇)。

備注2:對生成的選項進行處理

如果需要在生成的選項元素上運行一些自定義邏輯,可以使用optionsAfterRender回調。 每當將一個選項元素插入到列表中時,將調用回調函數,並使用以下參數:

  1. 插入的option元素
  2. 與其綁定的數據項,或對於caption元素未定義的數據項

下面是一個使用optionsAfterRender向每個選項添加禁用綁定的示例:

源碼:

<select size=3 data-bind="
    options: myItems,
    optionsText: 'name',
    optionsValue: 'id',
    optionsAfterRender: setOptionDisable">
</select>
 
<script type="text/javascript">
    var vm = {
        myItems: [
            { name: 'Item 1', id: 1, disable: ko.observable(false)},
            { name: 'Item 3', id: 3, disable: ko.observable(true)},
            { name: 'Item 4', id: 4, disable: ko.observable(false)}
        ],
        setOptionDisable: function(option, item) {
            ko.applyBindingsToNode(option, {disable: item.disable}, item);
        }
    };
    ko.applyBindings(vm);
</script>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM