KnockoutJS - Liaison d'options

Cette liaison est utilisée pour définir les options d'un élément de sélection. Cela peut être utilisé pour une liste déroulante ou une liste à sélection multiple. Cette liaison ne peut pas être utilisée avec autre chose que des éléments <select>.

Syntax

options: <binding-array>

Parameters

Le paramètre à passer ici est un tableau. Pour chaque entrée du tableau, l'option sera ajoutée pour le nœud de sélection respectif. L'option antérieure sera supprimée.
Si le paramètre est une valeur observable, les options disponibles de l'élément seront mises à jour au fur et à mesure que l'observable sous-jacente est modifiée. L'élément n'est traité qu'une seule fois, si aucune observable n'est utilisée.
Paramètres supplémentaires
- optionsCaption - Il ne s'agit que d'une valeur factice par défaut, qui se lit comme suit: «Sélectionner l'élément ci-dessous» ou «Choisir par le bas».
- optionsText- Ce paramètre vous permet de spécifier la propriété d'objet que vous souhaitez définir comme texte dans la liste déroulante. Ce paramètre peut également inclure une fonction, qui renvoie la propriété à utiliser.
- optionsValue- Similaire à optionsText. Ce paramètre permet de spécifier quelle propriété d'objet peut être utilisée pour définir l'attribut value des éléments option.
- optionsIncludeDestroyed - Spécifiez ce paramètre si vous souhaitez voir les éléments du tableau qui sont marqués comme détruits et qui ne sont pas réellement supprimés du tableau observable.
- optionsAfterRender - Utilisez cette option pour exécuter une logique personnalisée sur les éléments d'option existants.
- selectedOptions - Ceci est utilisé pour lire et écrire les options sélectionnées à partir d'une liste de sélection multiple.
- valueAllowUnset- En utilisant ce paramètre, il est possible de définir la propriété du modèle avec la valeur qui n'existe pas réellement dans l'élément select. De cette façon, on peut garder l'option par défaut vide lorsque l'utilisateur affiche la liste déroulante pour la toute première fois.

Example

Jetons un œil à l'exemple suivant qui illustre l'utilisation de la liaison d'options.

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

Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -

Enregistrez le code ci-dessus dans options-bind.htm fichier.
Ouvrez ce fichier HTML dans un navigateur.
Notez que la liaison de valeur est utilisée pour lire l'élément actuellement sélectionné dans la liste déroulante.

Observations

La sélection est conservée lors de la définition / modification des options

KO laissera la sélection de l'utilisateur inchangée dans la mesure du possible, tandis que la liaison d'options met à jour l'ensemble d'options dans <select>élément. Pour une seule sélection dans la liste déroulante, la valeur précédemment sélectionnée sera toujours conservée. Pour la liste de sélection multiple, toutes les options précédemment sélectionnées seront conservées.

Post-traitement des options générées

Les options générées peuvent être post-traitées pour une logique personnalisée supplémentaire à l'aide de optionsAfterRenderrappeler. Cette fonction est exécutée après l'insertion de chaque élément dans la liste, avec les paramètres suivants -

L'élément option qui est inséré.
L'élément de données auquel il est lié; cela ne sera pas défini pour l'élément caption.