KnockoutJS - Opciones vinculantes

Este enlace se utiliza para definir las opciones de un elemento seleccionado. Esto se puede utilizar para una lista desplegable o una lista de selección múltiple. Este enlace no se puede utilizar con nada más que elementos <select>.

Syntax

options: <binding-array>

Parameters

El parámetro que se pasa aquí es una matriz. Para cada entrada en la matriz, se agregará la opción para el nodo de selección respectivo. Se eliminará la opción anterior.
Si el parámetro es un valor observable, las opciones disponibles del elemento se actualizarán a medida que se cambie el observable subyacente. El elemento se procesa solo una vez, si no se utiliza ningún observable.
Parámetros adicionales
- optionsCaption - Este es solo un valor ficticio predeterminado, que se lee como 'Seleccionar elemento de abajo' o 'Elegir de abajo'.
- optionsText- Este parámetro le permite especificar qué propiedad del objeto desea establecer como texto en la lista desplegable. Este parámetro también puede incluir una función, que devuelve la propiedad que se utilizará.
- optionsValue- Similar a optionsText. Este parámetro permite especificar qué propiedad de objeto se puede utilizar para establecer el atributo de valor de los elementos de opción.
- optionsIncludeDestroyed - Especifique este parámetro si desea ver los elementos de la matriz que están marcados como destruidos y no se eliminan realmente de la matriz observable.
- optionsAfterRender - Utilice esto para ejecutar alguna lógica personalizada en los elementos de opción existentes.
- selectedOptions - Se utiliza para leer y escribir las opciones seleccionadas de una lista de selección múltiple.
- valueAllowUnset- Usando este parámetro, es posible establecer la propiedad del modelo con el valor que realmente no existe en el elemento de selección. De esta manera, se puede mantener la opción predeterminada en blanco cuando el usuario ve el menú desplegable por primera vez.

Example

Echemos un vistazo al siguiente ejemplo que demuestra el uso de opciones vinculantes.

<!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>

Output

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

Guarde el código anterior en options-bind.htm archivo.
Abra este archivo HTML en un navegador.
Tenga en cuenta que el enlace de valor se utiliza para leer el elemento seleccionado actual en el menú desplegable.

Observaciones

La selección se conserva al configurar / cambiar opciones

KO dejará la selección del usuario sin cambios siempre que sea posible, mientras que el enlace de opciones actualiza el conjunto de opciones en <select>elemento. Para una sola selección en la lista desplegable, el valor seleccionado previamente aún se conservará. Para la lista de selección múltiple, se conservarán todas las opciones seleccionadas previamente.

Post-procesamiento de las opciones generadas

Las opciones generadas se pueden postprocesar para obtener más lógica personalizada con la ayuda de optionsAfterRenderllamar de vuelta. Esta función se ejecuta después de que cada elemento se inserta en la lista, con los siguientes parámetros:

El elemento de opción que se inserta.
El elemento de datos contra el que está vinculado; esto no estará definido para el elemento de título.

Example

Echemos un vistazo al siguiente ejemplo que usa optionsAfterRender para agregar un enlace de desactivación a cada opción.

<!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>

Output

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

Guarde el código anterior en options-bind-optionsafterrender.htm archivo.
Abra este archivo HTML en un navegador.
La opción con id 2 está deshabilitada usando la devolución de llamada optionsAfterRender.

↰ Previous page