KnockoutJS - Enviar enlace

Este enlace se utiliza para invocar una función de JavaScript cuando se envía el elemento DOM asociado. Este enlace se usa principalmente para elementos de formulario.

El formulario no se envía realmente al servidor cuando se utiliza el enlace de envío. KO evita la acción predeterminada de los navegadores. Si desea que el enlace de envío funcione como un elemento de envío real, devuelva verdadero desde su función de controlador.

Sintaxis

submit: <binding-function>

Parámetros

  • La función de enlace aquí será la función principal que debe invocarse después del evento de envío.

  • Esta función puede ser cualquier función de JavaScript y no es necesario que sea una función de ViewModel.

Ejemplo

Echemos un vistazo al siguiente ejemplo que demuestra el uso del enlace de envío.

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

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

  • Guarde el código anterior en submit-bind.htm archivo.

  • Abra este archivo HTML en un navegador.

  • Este programa suma 2 números. En KO, cualquier dato aceptado de la interfaz de usuario se considera en formato de cadena de forma predeterminada, por lo que debe convertirse al formato de número en caso de operación numérica.

Consulte el enlace de clic para obtener notas adicionales, como pasar parámetros adicionales, etc. Todas las notas de esa página también se aplican al enlace de envío.