submit: <binding-function>

优质
小牛编辑
130浏览
2023-12-01

此绑定用于在提交关联的DOM元素时调用JavaScript函数。 此绑定主要用于表单元素。

使用提交绑定时,表单实际上不会提交给服务器。 KO阻止浏览器默认操作。 如果您希望提交绑定作为真正的提交元素,则从处理函数返回true。

语法 (Syntax)

submit: <binding-function>

参数 (Parameters)

  • 这里的绑定函数将是在提交事件后需要调用的main函数。

  • 这个函数可以是任何JavaScript函数,也不一定是ViewModel函数。

例子 (Example)

让我们看一下下面的示例,该示例演示了如何使用提交绑定。

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

输出 (Output)

让我们执行以下步骤来查看上述代码的工作原理 -

  • 将以上代码保存在submit-bind.htm文件中。

  • 在浏览器中打开此HTML文件。

  • 该程序增加了2个数字。 在KO中,默认情况下,来自UI的任何接受的数据都被视为字符串格式,因此在数字操作的情况下需要将其转换为数字格式。

请参阅点击装订以获取附加说明,例如传递额外参数等。该页面上的所有注释也适用于提交装订。