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

列印頁面