KnockoutJS - Enviar vinculação

Essa ligação é usada para invocar uma função JavaScript quando o elemento DOM associado é enviado. Essa ligação é usada principalmente para elementos de formulário.

O formulário não é realmente enviado ao servidor quando a vinculação de envio é usada. KO impede a ação padrão do navegador. Se você deseja que a ligação de envio funcione como um elemento de envio real, retorne true de sua função de manipulador.

Sintaxe

submit: <binding-function>

Parâmetros

A função de ligação aqui será a função principal que precisa ser chamada após o evento de envio.
Essa função pode ser qualquer função JavaScript e não precisa ser necessariamente a função ViewModel.

Exemplo

Vamos dar uma olhada no exemplo a seguir, que demonstra o uso da vinculação de envio.

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

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código acima -

Salve o código acima em submit-bind.htm Arquivo.
Abra este arquivo HTML em um navegador.
Este programa adiciona 2 números. Em KO, todos os dados aceitos da IU são considerados no formato String por padrão, portanto, ele precisa ser convertido para o formato Numérico no caso de operação Numérica.

Consulte a vinculação de cliques para obter notas adicionais, como passar parâmetros extras etc. Todas as notas nessa página também se aplicam ao envio de vinculação.

↰ Previous page