KnockoutJS-バインドをクリック

クリックバインディングは最も単純なバインディングの1つであり、クリックに基づいてDOM要素に関連付けられたJavaScript関数を呼び出すために使用されます。このバインディングは、イベントハンドラーのように機能します。

これは、 button 、 input 、および a などの要素で最も一般的に使用されますが、実際には表示されているすべてのDOM要素で機能します。

構文

click: <binding-function>

パラメーター

ここでのパラメーターは、クリックに基づいて呼び出す必要があるJavaScript関数です。これは任意の関数にすることができ、ViewModel関数である必要はありません。

例

クリックバインディングの使用方法を示す次の例を見てみましょう。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Click Binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>

      <p>Enter your name: <input data-bind = "value: someValue"/></p>
      <p><button data-bind = "click: showMessage">Click here</button></p>

      <script type = "text/javascript">
         function ViewModel () {
            this.someValue = ko.observable();

            this.showMessage = function() {
               alert("Hello "+ this.someValue()+ "!!! How are you today?"+
                  "\nClick Binding is used here !!!");
            }
         };

         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>

   </body>
</html>

出力

上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-

上記のコードを click-bind ファイルに保存します。
このHTMLファイルをブラウザーで開きます。
[ここをクリック]ボタンをクリックすると、画面にメッセージが表示されます。

観察

現在のアイテムもパラメータとして渡すことができます

ハンドラー関数が呼び出されるときに、パラメーターとして現在のモデル値を提供することもできます。これは、一連のアイテムで同じアクションを実行する必要があるデータのコレクションを扱う場合に役立ちます。

例

よりよく理解するために、次の例を見てみましょう。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Click binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <p>List of product details:</p>
      <ul data-bind = "foreach: productArray ">
         <li>
            <span data-bind = "text: productName"></span>
               <a href = "#" data-bind = "click: $parent.removeProduct">Remove </a>
         </li>
      </ul>

      <script type = "text/javascript">
         function AppViewModel() {
            self = this;
            self.productArray = ko.observableArray ([
               {productName: 'Milk'},
               {productName: 'Oil'},
               {productName: 'Shampoo'}
            ]);

            self.removeProduct = function() {
               self.productArray.remove(this);
            }
         };

         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>

   </body>
</html>

出力

上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-

上記のコードを click-for-current-item ファイルに保存します。
このHTMLファイルをブラウザーで開きます。
removeProduct 関数は、Removeリンクがクリックされるたびに呼び出され、配列内の特定のアイテムに対して呼び出されます。
ハンドラー関数に到達するために、$ parentバインディングコンテキストが使用されることに注意してください。

より多くのパラメーターを渡す

DOMイベントと現在のモデル値をハンドラー関数に渡すこともできます。

例

よりよく理解するために、次の例を見てみましょう。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Click Binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <p>Press Control key + click below button.</p>
      <p><button data-bind = "click: showMessage">Click here to read message</button></p>

      <script type = "text/javascript">
         function ViewModel () {

            this.showMessage = function(data,event) {
               alert("Click Binding is used here !!!");

               if (event.ctrlKey) {
                  alert("User was pressing down the Control key.");
               }
            }
         };

         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>

   </body>
</html>

出力

上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-

上記のコードを click-bind-more-params ファイルに保存します。
このHTMLファイルをブラウザーで開きます。
コントロールキーを押すと、このバインドによってキャプチャされます。

デフォルトのクリックアクションを許可する

KnockoutJSは、クリックイベントがデフォルトでデフォルトアクションを実行するのを防ぎます。つまり、 <a> タグでクリックバインディングが使用されている場合、ブラウザはハンドラー関数を呼び出すだけであり、実際にはhrefに記載されているリンクに移動しません。

クリックバインディングでデフォルトのアクションを実行する場合は、ハンドラー関数からtrueを返すだけです。

例

クリックバインディングによって実行されるデフォルトのアクションを示す次の例を見てみましょう。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Click Binding - allowing default action</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <a href = "http://www.finddevguides.com//" target = "_blank"
         data-bind = "click: callUrl">Click here to see how default
         Click binding works.
      </a>

      <script type = "text/javascript">
         function ViewModel() {

            this.callUrl = function() {
               alert("Default action in Click Binding is allowed here !!!
                  You are redirected to link.");
               return true;
            }
         };

         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>

   </body>
</html>

出力

上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-

上記のコードを click-default-bind ファイルに保存します。
このHTMLファイルをブラウザーで開きます。
リンクをクリックすると、画面にメッセージが表示されます。 hrefに記載されているURLが新しいウィンドウで開きます。

イベントがバブリングするのを防ぐ

KOは、クリックイベントが上位レベルのイベントハンドラーにバブルすることを許可します。 2つのクリックイベントがネストされている場合、両方のクリックハンドラー関数が呼び出されます。必要に応じて、clickBubbleと呼ばれる追加のバインディングを追加し、それにfalse値を渡すことにより、このバブリングを防止できます。

例

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

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Click Binding - handling clickBubble</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <div data-bind = "click: outerFunction">
         <button data-bind = "click: innerFunction, clickBubble:false">
            Click me to see use of clickBubble.
         </button>
      </div>

      <script type = "text/javascript">
         function ViewModel () {

            this.outerFunction = function() {
               alert("Handler function from Outer loop called.");
            }

            this.innerFunction = function() {
               alert("Handler function from Inner loop called.");
            }
         };

         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>

   </body>
</html>

出力

上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-

上記のコードを click-cllickbubble-bind ファイルに保存します。
このHTMLファイルをブラウザーで開きます。
ボタンをクリックして、値falseのclickBubbleバインディングを追加すると、イベントがinnerFunctionを通過できなくなることを確認します。

Knockoutjs-click-binding

KnockoutJS-バインドをクリック

観察

現在のアイテムもパラメータとして渡すことができます

より多くのパラメーターを渡す

デフォルトのクリックアクションを許可する

イベントがバブリングするのを防ぐ

目次