KnockoutJS - selectedOptions Binding

Questa associazione viene utilizzata per lavorare con gli elementi attualmente selezionati nel controllo del modulo di selezione di più elenchi. Questa associazione può essere utilizzata solo con l'associazione di opzioni e il controllo del modulo <select>.

Quando l'utente seleziona o deseleziona un elemento nell'elenco di selezione multipla, questo aggiunge o rimuove il valore corrispondente a un array sul modello di visualizzazione. Se si tratta di un array osservabile, gli elementi selezionati o deselezionati dall'interfaccia utente vengono aggiornati anche nell'array in ViewModel, rendendolo un metodo di associazione a due vie.

Sintassi

selectedOptions: <binding-array>

Parametri

  • Il parametro qui sarà un array (può anche essere un Observable). Gli elementi attivi dell'elemento selezionato vengono memorizzati in questo array. Gli elementi precedenti verranno sovrascritti.

  • Se il parametro è Matrice osservabile, gli elementi selezionati vengono aggiornati man mano che l'osservabile sottostante viene modificato. L'elemento viene elaborato solo una volta, se non viene utilizzato alcun array Observable.

Esempio

Diamo uno sguardo al seguente esempio che mostra l'uso di selectedOptions Binding.

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

   <body>
      <p>Tutorials Library:<br><br>
      <select size = 10 multiple = 'true' data-bind = "
         options: availableTutorials,
         selectedOptions: selectedTutorials
      "></select></p>
         
      <p>(Press control and select for multiple options.)</p>
      <p>You have chosen below Tutorials:</p>
      <ul data-bind = "foreach: selectedTutorials">
         <li>
            <span data-bind = "text: $data"> </span>
         </li>
      </ul>

      <script type = "text/javascript">
         function ViewModel() {
            self = this;
            self.availableTutorials = ko.observableArray ([
               'Academic','Big Data','Databases',
               'Java Technologies','Mainframe',
               'Management','Microsoft Technologies',
               'Mobile Development','Programming','Software Quality'
            ]);

            self.selectedTutorials = ko.observableArray();
         };
         
         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

  • Salva il codice sopra in formato selectedoptions-bind.htm file.

  • Apri questo file HTML in un browser.

  • selectedTutorials è un array per memorizzare le opzioni selezionate.