KnockoutJS - 點選繫結

點選繫結是最簡單的繫結之一，用於根據點選事件呼叫與 DOM 元素關聯的 JavaScript 函式。此繫結類似於事件處理程式。

它最常與按鈕、輸入和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.htm檔案中。
在瀏覽器中開啟此 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.htm檔案中。
在瀏覽器中開啟此 HTML 檔案。
每次單擊“刪除”連結時都會呼叫removeProduct函式，併為陣列中的該特定專案呼叫。
請注意，使用$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.htm檔案中。
在瀏覽器中開啟此 HTML 檔案。
此繫結捕獲 Control 鍵的按下。

允許預設點選操作

預設情況下，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 = "https://tutorialspoint.tw//" 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.htm檔案中。
在瀏覽器中開啟此 HTML 檔案。
單擊連結，螢幕上將顯示一條訊息。href 中提到的 URL 在新視窗中開啟。

阻止事件冒泡

KO 將允許點選事件冒泡到更高級別的事件處理程式。這意味著如果您嵌套了兩個點選事件，則將呼叫這兩個事件的點選處理程式函式。如果需要，可以透過新增一個名為 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.htm檔案中。
在瀏覽器中開啟此 HTML 檔案。
單擊按鈕，並觀察將 clickBubble 繫結設定為 false 如何阻止事件傳遞給 innerFunction。

knockoutjs_declarative_bindings.htm

列印頁面