KnockoutJS - Liaison des options sélectionnées

Cette liaison est utilisée pour travailler avec des éléments qui sont actuellement sélectionnés dans le contrôle de formulaire de sélection de listes multiples. Cette liaison peut être utilisée uniquement avec la liaison d'options et le contrôle de formulaire <select>.

Lorsque l'utilisateur sélectionne ou désélectionne un élément dans la liste de sélection multiple, cela ajoute ou supprime la valeur correspondante à un tableau sur le modèle de vue. S'il s'agit d'un tableau Observable, les éléments sélectionnés ou désélectionnés de l'interface utilisateur sont également mis à jour dans le tableau de ViewModel, ce qui en fait une méthode de liaison bidirectionnelle.

Syntaxe

selectedOptions: <binding-array>

Paramètres

  • Le paramètre ici sera un tableau (peut également être un observable). Les éléments actifs de l'élément sélectionné sont stockés dans ce tableau. Les éléments antérieurs seront écrasés.

  • Si le paramètre est Tableau observable, les éléments sélectionnés sont mis à jour au fur et à mesure que l'observable sous-jacente est modifiée. L'élément n'est traité qu'une seule fois, si aucun tableau observable n'est utilisé.

Exemple

Jetons un œil à l'exemple suivant qui montre l'utilisation de la liaison selectedOptions.

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

Production

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

  • Enregistrez le code ci-dessus dans selectedoptions-bind.htm fichier.

  • Ouvrez ce fichier HTML dans un navigateur.

  • selectedTutorials est un tableau pour stocker les options sélectionnées.