KnockoutJS - Soumettre la liaison

Cette liaison est utilisée pour appeler une fonction JavaScript lorsque l'élément DOM associé est soumis. Cette liaison est principalement utilisée pour les éléments de formulaire.

Le formulaire n'est pas réellement soumis au serveur lorsque la liaison de soumission est utilisée. KO empêche l'action par défaut des navigateurs. Si vous souhaitez que la liaison de soumission fonctionne comme un élément de soumission réel, retournez true à partir de votre fonction de gestionnaire.

Syntaxe

submit: <binding-function>

Paramètres

  • La fonction de liaison ici sera la fonction principale qui doit être appelée après l'événement de soumission.

  • Cette fonction peut être n'importe quelle fonction JavaScript et ne doit pas nécessairement être une fonction ViewModel.

Exemple

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

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Submit Binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <form data-bind = "submit: addition">
         <p>Enter first number: <input data-bind = "value: var1" /></p>
         <p>Enter second number: <input data-bind = "value: var2" /></p>
         <p><button type = "submit" >Click here for addition</button></p>
      </form>

      <script type = "text/javascript">
         function ViewModel () {
            self = this;
            self.var1 = ko.observable(10);
            self.var2 = ko.observable(30);
            self.var3 = ko.observable(0);

            this.addition = function() {
               self.var1(Number(self.var1()));
               self.var2(Number(self.var2()));

               this.var3 = self.var1() + self.var2();
               alert("Addition is = "+ this.var3 );
            };
         };

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

  • Ouvrez ce fichier HTML dans un navigateur.

  • Ce programme ajoute 2 nombres. Dans KO, toutes les données acceptées de l'interface utilisateur sont considérées par défaut au format chaîne, elles doivent donc être converties au format numérique en cas d'opération numérique.

Veuillez vous référer à la reliure par clic pour des notes supplémentaires telles que la transmission de paramètres supplémentaires, etc.