KnockoutJS - 選項繫結

此繫結用於定義 select 元素的選項。這可用於下拉列表或多選列表。此繫結不能與 <select> 元素以外的任何其他元素一起使用。

語法

options: <binding-array>

引數

此處傳遞的引數是一個數組。對於陣列中的每個條目，都會為相應的 select 節點新增選項。之前的選項將被刪除。
如果引數是一個可觀察值，則當底層可觀察值發生更改時，元素的可用選項將隨之更新。如果未使用可觀察物件，則元素只處理一次。
附加引數
- optionsCaption − 這只是一個預設的虛擬值，顯示為“從下面選擇專案”或“從下面選擇”。
- optionsText − 此引數允許您指定要設定為下拉列表中文字的物件屬性。此引數還可以包含一個函式，該函式返回要使用的屬性。
- optionsValue − 與 optionsText 類似。此引數允許指定可用於設定選項元素 value 屬性的物件屬性。
- optionsIncludeDestroyed − 如果您想檢視標記為已銷燬但實際上未從可觀察陣列中刪除的陣列項，請指定此引數。
- optionsAfterRender − 用於對現有選項元素執行一些自定義邏輯。
- selectedOptions − 用於從多選列表讀取和寫入選定的選項。
- valueAllowUnset − 使用此引數，可以將模型屬性設定為 select 元素中實際上不存在的值。這樣，當用戶第一次檢視下拉列表時，可以將預設選項保留為空白。

示例

讓我們來看下面的示例，該示例演示了選項繫結的用法。

線上演示

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Options Binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <p>Tutorials Library:
      <select data-bind = "
         options: availableTutorials,
         value: selectedTutorial,
         optionsCaption: 'Choose tutuorial...',
      "></select></p>
      
      <p>You have selected <b><span 
         data-bind = "text:selectedTutorial"></span></b></p>

      <script type = "text/javascript">
         function ViewModel() {
            this.selectedTutorial = ko.observable();
         
            this.availableTutorials = ko.observableArray ([
               'Academic','Big Data',
               'Databases','Java Technologies',
               'Mainframe','Management',
               'Microsoft Technologies','Mobile Development',
               'Programming','Software Quality'
            ]);
         };
         
         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

輸出

讓我們執行以下步驟來了解上述程式碼的工作原理：

將上述程式碼儲存到 options-bind.htm 檔案中。
在瀏覽器中開啟此 HTML 檔案。
請注意，值繫結用於讀取下拉列表中當前選擇的專案。

觀察結果

設定/更改選項時保留選擇

在選項繫結更新<select>元素中的選項集時，KO 會盡可能保留使用者的選擇。對於下拉列表中的單選，先前選擇的值仍將保留。對於多選列表，所有先前選擇的選項都將保留。

生成的選項的後處理

可以使用optionsAfterRender回撥對生成的選項進行後處理以進行一些進一步的自定義邏輯。此函式在將每個元素插入列表後執行，並具有以下引數：

插入的選項元素。
與其繫結的資料項；對於標題元素，這將未定義。

示例

讓我們來看下面的示例，該示例使用 optionsAfterRender 為每個選項新增停用繫結。

線上演示

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Options Binding - using optionsAfterRender </title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <select size = 3 data-bind = "
         options: myItems,
         optionsText: 'name',
         optionsValue: 'id',
         optionsAfterRender: setOptionDisable">
      </select>

      <script type = "text/javascript">
         function ViewModel() {
            myItems = [
               { name: 'First Class', id: 1, disable: ko.observable(false)},
               { name: 'Executive Class', id: 2, disable: ko.observable(true)},
               { name: 'Second Class', id: 3, disable: ko.observable(false)}
            ];
            
            setOptionDisable = function(option, item) {
               ko.applyBindingsToNode(option, {disable: item.disable}, item);
            }
         };
      
         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

輸出

讓我們執行以下步驟來了解上述程式碼的工作原理：

將上述程式碼儲存到 options-bind-optionsafterrender.htm 檔案中。
在瀏覽器中開啟此 HTML 檔案。
使用 optionsAfterRender 回撥停用 ID 為 2 的選項。

knockoutjs_declarative_bindings.htm

列印頁面