KnockoutJS-オプションのバインド

このバインディングは、select要素のオプションを定義するために使用されます。これは、ドロップダウンリストまたは複数選択リストに使用できます。このバインディングは、<select>要素以外では使用できません。

構文

options: <binding-array>

パラメーター

ここで渡されるパラメーターは配列です。配列の各エントリについて、それぞれの選択ノードにオプションが追加されます。以前のオプションは削除されます。
パラメータが観測可能な値である場合、要素の利用可能なオプションは、基礎となる観測可能値が変更されると更新されます。オブザーバブルが使用されていない場合、要素は1回だけ処理されます。
追加パラメーター
optionsCaption -これは単なるデフォルトのダミー値で、「下から項目を選択」または「下から選択」と表示されます。
optionsText -このパラメーターを使用すると、ドロップダウンリストでテキストとして設定するオブジェクトプロパティを指定できます。このパラメーターには、使用するプロパティを返す関数を含めることもできます。
optionsValue -optionsTextに似ています。このパラメーターを使用すると、option要素の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 ファイルに保存します。
このHTMLファイルをブラウザーで開きます。
値バインディングは、現在選択されているアイテムをドロップダウンから読み取るために使用されることに注意してください。

観察

オプションの設定/変更時に選択が保持されます

KOは、可能な場合はユーザーの選択を変更せずに残しますが、オプションバインディングは <select> 要素のオプションセットを更新します。ドロップダウンリストで1回選択しても、以前に選択した値は保持されます。複数選択リストの場合、以前に選択されたすべてのオプションが保持されます。

生成されたオプションの後処理

生成されたオプションは、 optionsAfterRender コールバックを使用して、さらにいくつかのカスタムロジック用に後処理できます。この関数は、各要素がリストに挿入された後、次のパラメータで実行されます-

挿入されるオプション要素。
バインドされるデータ項目。これはcaption要素では未定義になります。

例

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 ファイルに保存します。
このHTMLファイルをブラウザーで開きます。
idAfter 2のオプションは、optionsAfterRenderコールバックを使用して無効にされます。

Knockoutjs-options-binding

KnockoutJS-オプションのバインド

観察

オプションの設定/変更時に選択が保持されます

生成されたオプションの後処理

目次