KnockoutJS-バインディングの送信

このバインディングは、関連付けられたDOM要素が送信されたときにJavaScript関数を呼び出すために使用されます。このバインディングは、主にフォーム要素に使用されます。

送信バインディングが使用されている場合、フォームは実際にサーバーに送信されません。 KOは、ブラウザのデフォルトアクションを防ぎます。送信バインディングを実際の送信要素として機能させる場合は、ハンドラー関数からtrueを返します。

構文

submit: <binding-function>

パラメーター

ここでのバインディング関数は、サブミットイベントの後に呼び出す必要があるメイン関数になります。
この関数は任意のJavaScript関数にすることができ、必ずしもViewModel関数である必要はありません。

例

submitバインディングの使用を示す次の例を見てみましょう。

<!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 ファイルに保存します。
このHTMLファイルをブラウザーで開きます。
このプログラムは2つの数字を追加します。 KOでは、UIから受け入れられたデータはデフォルトで文字列形式と見なされるため、数値演算の場合、数値形式に変換されます。

追加パラメーターの受け渡しなどの追加の注意事項については、クリックバインディングを参照してください。そのページのすべてのメモは、バインディングの送信にも適用されます。

Knockoutjs-submit-binding

目次

KnockoutJS-バインディングの送信

構文

パラメーター

例

出力