KnockoutJS - Opzioni vincolanti

Questa associazione viene utilizzata per definire le opzioni per un elemento di selezione. Può essere utilizzato per un elenco a discesa o un elenco a selezione multipla. Questa associazione non può essere utilizzata con qualcosa di diverso dagli elementi <select>.

Syntax

options: <binding-array>

Parameters

Il parametro da passare qui è un array. Per ogni voce nell'array, verrà aggiunta l'opzione per il rispettivo nodo di selezione. L'opzione precedente verrà rimossa.
Se il parametro è un valore osservabile, le opzioni disponibili dell'elemento verranno aggiornate man mano che l'osservabile sottostante viene modificato. L'elemento viene elaborato una sola volta, se non viene utilizzato alcun osservabile.
Parametri aggiuntivi
- optionsCaption - Questo è solo un valore fittizio predefinito, che si legge come "Seleziona elemento dal basso" o "Scegli dal basso".
- optionsText- Questo parametro consente di specificare quale proprietà dell'oggetto si desidera impostare come testo nell'elenco a discesa. Questo parametro può anche includere una funzione, che restituisce la proprietà da utilizzare.
- optionsValue- Simile a optionsText. Questo parametro consente di specificare quale proprietà dell'oggetto può essere utilizzata per impostare l'attributo value degli elementi opzione.
- optionsIncludeDestroyed - Specificare questo parametro se si desidera vedere gli elementi dell'array che sono contrassegnati come distrutti e non sono effettivamente eliminati dall'array osservabile.
- optionsAfterRender - Usalo per eseguire una logica personalizzata sugli elementi delle opzioni esistenti.
- selectedOptions - Viene utilizzato per leggere e scrivere le opzioni selezionate da un elenco di selezione multipla.
- valueAllowUnset- Utilizzando questo parametro, è possibile impostare la proprietà del modello con il valore che effettivamente non esiste nell'elemento select. In questo modo è possibile mantenere l'opzione predefinita vuota quando l'utente visualizza il menu a discesa per la prima volta.

Example

Diamo un'occhiata al seguente esempio che dimostra l'uso dell'associazione di opzioni.

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

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

Salva il codice sopra in formato options-bind.htm file.
Apri questo file HTML in un browser.
Notare che l'associazione del valore viene utilizzata per leggere l'elemento selezionato corrente dal menu a discesa.

Osservazioni

La selezione viene mantenuta durante l'impostazione / la modifica delle opzioni

KO lascerà la selezione dell'utente invariata ove possibile, mentre l'associazione delle opzioni aggiorna il set di opzioni in <select>elemento. Per una singola selezione nell'elenco a discesa, il valore selezionato in precedenza verrà comunque mantenuto. Per l'elenco a selezione multipla, tutte le opzioni selezionate in precedenza verranno conservate.

Post-elaborazione delle opzioni generate

Le opzioni generate possono essere post-elaborate per ulteriori logiche personalizzate con l'aiuto di optionsAfterRenderrichiama. Questa funzione viene eseguita dopo che ogni elemento è stato inserito nella lista, con i seguenti parametri:

L'elemento opzione che viene inserito.
L'elemento dati a cui è associato; questo non sarà definito per l'elemento didascalia.