KnockoutJS——提交绑定

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

使用提交绑定时，表单实际上并未提交到服务器。KO 阻止浏览器的默认动作。如果你希望提交绑定像真正的提交元素那样工作，那么就从处理程序函数返回 true。

语法

submit: <binding-function>

参数

这里的绑定函数将是提交事件后需要调用的主函数。
此函数可以是任何 JavaScript 函数，并且不一定是非 ViewModel 函数。

示例

让我们来看一下展示如何使用提交绑定的示例。

演示

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

输出

让我们执行以下步骤，看看上面的代码是如何工作的。

将上面的代码另存为 submit-bind.htm 文件。
在浏览器中打开此 HTML 文件。
此程序添加了 2 个数字。在 KO 中，任何被 UI 接受的数据默认为字符串格式，因此在数值操作的情况下，它需要转换为数字格式。

请参考 click 绑定，了解有关传递额外参数等其他注释。该页面上的所有注释也适用于 submit 绑定。

knockoutjs_declarative_bindings.htm

打印页面