KnockoutJS - Invia vincolante

Questa associazione viene utilizzata per richiamare una funzione JavaScript quando viene inviato l'elemento DOM associato. Questa associazione viene utilizzata principalmente per gli elementi del modulo.

Il modulo non viene effettivamente inviato al server quando viene utilizzato il binding di invio. KO impedisce l'azione predefinita del browser. Se vuoi che il binding di invio funzioni come elemento di invio reale, restituisci true dalla funzione del gestore.

Sintassi

submit: <binding-function>

Parametri

  • La funzione di associazione qui sarà la funzione principale che deve essere invocata dopo l'invio dell'evento.

  • Questa funzione può essere qualsiasi funzione JavaScript e non deve essere necessariamente una funzione ViewModel.

Esempio

Diamo uno sguardo al seguente esempio che dimostra l'uso di submit binding.

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

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

  • Salva il codice sopra in formato submit-bind.htm file.

  • Apri questo file HTML in un browser.

  • Questo programma aggiunge 2 numeri. In KO, tutti i dati accettati dall'interfaccia utente sono considerati in formato stringa per impostazione predefinita, quindi devono essere convertiti in formato numerico in caso di operazione numerica.

Fare riferimento al collegamento dei clic per note aggiuntive come il passaggio di parametri aggiuntivi, ecc. Tutte le note in quella pagina si applicano anche per l'invio dell'associazione.