KnockoutJS - Activer la liaison

Cette liaison est utilisée pour activer certains éléments DOM en fonction de la condition spécifiée. Ceci est utile avec des éléments de formulaire tels queinput, select, et textarea.

Syntax

enable: <binding-value>

Parameters

  • Le paramètre se compose d'une valeur de type booléen qui décide si l'élément doit être activé ou non. L'élément est activé si le paramètre est vrai ou vrai comme valeur.

  • Les valeurs non booléennes sont considérées comme des valeurs vaguement booléennes. Signification 0 et null sont considérés comme des valeurs de type faux, et les objets Integer et non null sont considérés comme des valeurs de type vrai.

  • Si la condition dans le paramètre contient une valeur observable, la condition est réévaluée chaque fois que la valeur observable change. En conséquence, le balisage associé sera activé en fonction du résultat de la condition.

Example

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

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

   <body>
      <p> Enter your feedback here:<br><br>
         <textarea rows = 5 data-bind = "value: hasFeedback, 
            valueUpdate: 'afterkeydown'" ></textarea>
      </p>
      
      <p><button data-bind = "enable: hasFeedback">Save Feedback</button></p>

      <script type = "text/javascript">
         function ViewModel () {
            hasFeedback = ko.observable('');
         };

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

  • Ouvrez ce fichier HTML dans un navigateur.

  • Le bouton Enregistrer n'est activé que lorsque l'utilisateur a entré un commentaire.

Utilisation d'expressions aléatoires pour implémenter la liaison d'activation

Vous pouvez également utiliser une expression aléatoire pour décider si l'élément doit être activé ou non.

Example

Jetons un coup d'œil à l'exemple suivant qui montre l'utilisation d'une expression aléatoire pour appeler la liaison d'activation.

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

   <body>
      <p>Below button will be enabled only when product stock is available.</p>
      <button data-bind = "enable: productStock() > 0 ">
         Product Details
      </button>

      <script type = "text/javascript">
         function AppViewModel() {
            this.productStock = ko.observable(-10);
         };
         
         var vm = new AppViewModel();
         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 enable-random-bind.htm fichier.

  • Ouvrez ce fichier HTML dans un navigateur.

  • Le bouton Détails du produit n'est activé que lorsque le stock de produit est disponible.