KnockoutJS - Reliure à carreaux

Cette liaison est utilisée pour créer un lien entre un élément de formulaire vérifiable et la propriété ViewModel. La plupart de ces éléments de formulaire incluent une case à cocher et des boutons radio. Il s'agit également d'une méthode de liaison bidirectionnelle dans laquelle, au moment où l'utilisateur vérifie le contrôle de formulaire, la propriété ViewModel respective est modifiée et vice versa.

Syntaxe

checked: <binding-value>

Paramètres

Paramètres principaux

  • L'état de l'élément vérifiable est défini sur la valeur du paramètre. Auparavant, la valeur sera écrasée.

  • Checkbox- L'élément DOM est vérifié lorsque la valeur du paramètre ViewModel est vraie et n'est pas cochée si elle est fausse. Les nombres non nuls, les chaînes non vides et les objets non nuls sont interprétés avec une valeur booléenne vraie, tandis que les chaînes non définies, nulles et vides sont considérées comme une valeur fausse.

  • Radio Buttons- Les boutons radio fonctionnent sous la forme d'un format String. Cela signifie que KnockoutJS définira la valeur des éléments uniquement lorsque la valeur du paramètre correspond exactement à la valeur du nœud Radio Button. La propriété est définie avec la nouvelle valeur au moment où l'utilisateur sélectionne une nouvelle valeur de bouton radio.

  • Si le paramètre est une observable, la valeur des éléments est vérifiée ou décochée 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

  • checkedValue- L'option checkedValue est utilisée pour contenir la valeur utilisée par la liaison checked au lieu de l'attribut value de l'élément. Ceci est très utile lorsque la valeur vérifiée est autre chose qu'une chaîne (comme un entier ou un objet).

Par exemple, jetez un œil à l'extrait de code suivant où l'objet d'élément lui-même est inclus dans le tableau selectedValue, lorsque les cases à cocher respectives sont cochées.

<!-- ko foreach: items -->
   <input type = "checkbox" data-bind = "checkedValue: $data, 
      checked: $root.chosenValue" />
   <span data-bind = "text: itemName"></span>
<!-- /ko -->

<script type = "text/javascript">
   var viewModel = {
      
      itemsToBeSeen: ko.observableArray ([
         { itemName: 'Item Number One' },
         { itemName: 'Item Number Two' }
      ]),
      
      chosenValue: ko.observableArray()
   };
</script>

Si le paramètre checkedValue est une valeur Observable, la liaison met à jour la propriété de modèle vérifié chaque fois que la valeur sous-jacente change. Pour les boutons radio, KO mettra simplement à jour la valeur du modèle. Pour les cases à cocher, il remplacera l'ancienne valeur par la nouvelle valeur.

Exemple

Jetons un œil à l'exemple suivant qui illustre l'utilisation du contrôle de case à cocher.

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Checked checkbox Binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <p> The required files are installed. 
      Please check below to complete installation</p>
      
      <p><input type = "checkbox" data-bind = "checked: agreeFlag" />
      I agree to all terms and conditions applied.</p>
      
      <button data-bind = "enable: agreeFlag">Finish</button>

      <script type = "text/javascript">
         function ViewModel() {
            this.agreeFlag =  ko.observable(false)       // Initially unchecked
         };

         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 checked-checkbox-bind.htm fichier.

  • Ouvrez ce fichier HTML dans un navigateur.

  • Le bouton Terminer n'est activé que lorsque l'utilisateur accepte les termes et conditions.

Exemple

Voyons ci-dessous l'exemple qui démontre l'utilisation du contrôle par bouton radio -

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Checked Radio Button Binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <p> Select gender type from below:</p>
      <div><input type = "radio" name = "gender" value = "Male" 
         data-bind = "checked: checkGender" /> Male</div>
         
      <div><input type = "radio" name = "gender" value = "Female" 
         data-bind = "checked: checkGender" /> Female</div>
         
      <div><p>You have selected: <span 
         data-bind = "text:checkGender "></span></p></div>

      <script type = "text/javascript">
         function ViewModel () {
            checkGender =  ko.observable("Male")     // Initially male is selected
         };

         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 checked-radio-button-bind.htm fichier.

  • Ouvrez ce fichier HTML dans un navigateur.

  • Le bouton radio contient la valeur du type de sexe.