KnockoutJS - Encuadernación de selectedOptions

Este enlace se utiliza para trabajar con elementos que están seleccionados actualmente en el control de formulario de selección de lista múltiple. Este enlace se puede utilizar con el enlace de opciones y el control de formulario <select> solamente.

Cuando el usuario selecciona o deselecciona un elemento en la lista de selección múltiple, esto agrega o elimina el valor correspondiente a una matriz en el modelo de vista. Si es una matriz observable, los elementos seleccionados o deseleccionados de la interfaz de usuario también se actualizan en la matriz en ViewModel, lo que lo convierte en un método de enlace bidireccional.

Sintaxis

selectedOptions: <binding-array>

Parámetros

El parámetro aquí será una matriz (también puede ser un Observable). Los elementos activos del elemento de selección se almacenan en esta matriz. Los elementos anteriores se sobrescribirán.
Si el parámetro es una matriz observable, los elementos seleccionados se actualizan cuando se cambia el observable subyacente. El elemento se procesa solo una vez, si no se utiliza una matriz observable.

Ejemplo

Echemos un vistazo al siguiente ejemplo que demuestra el uso de 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>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código anterior en selectedoptions-bind.htm archivo.
Abra este archivo HTML en un navegador.
selectedTutorials es una matriz para almacenar las opciones seleccionadas.

↰ Previous page