KnockoutJS - Click Binding

Click binding is one of the simplest binding and is used to invoke a JavaScript function associated with a DOM element based on a click. This binding works like an event handler.
This is most commonly used with elements such as button, input, and a, but actually works with any visible DOM element.
Syntax
click: <binding-function>

Parameters
The parameter here will be a JavaScript function which needs to be invoked based on a click. This can be any function and need not be a ViewModel function.
Example
Let us look at the following example which demonstrates the use of click binding.
<!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>
Output
Let's carry out the following steps to see how the above code works −
Save the above code in click-bind.htm file.
Save the above code in click-bind.htm file.
Open this HTML file in a browser.
Open this HTML file in a browser.
Click the Click here button and a message will be shown on the screen.
Click the Click here button and a message will be shown on the screen.
Enter your name: 
Click here
It is also possible to provide a current model value as a parameter when the handler function is called. This is useful when dealing with a collection of data, wherein the same action needs to be performed on a set of items.
Example
Let us look at the following example to understand it better.
<!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>
Output
Let's carry out the following steps to see how the above code works −
Save the above code in click-for-current-item.htm file.
Save the above code in click-for-current-item.htm file.
Open this HTML file in a browser.
Open this HTML file in a browser.
removeProduct function is called every time the Remove link is clicked and is called for that particular item in array.
removeProduct function is called every time the Remove link is clicked and is called for that particular item in array.
Note that the $parent binding context is used to reach the handler function.
Note that the $parent binding context is used to reach the handler function.
List of product details −

Milk Remove 


Oil Remove 


Shampoo Remove 

DOM event along with the current model value can also be passed to the handler function.
Example
Let us take a look at the following example to understand it better.
<!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>
Output
Let's carry out the following steps to see how the above code works −
Save the above code in click-bind-more-params.htm file.
Save the above code in click-bind-more-params.htm file.
Open this HTML file in a browser.
Open this HTML file in a browser.
Pressing of the control key is captured by this binding.
Pressing of the control key is captured by this binding.
Press Control key + click below button.
Click here to read message 
KnockoutJS prevents click event to perform any default action by default. Meaning if Click binding is used on <a> tag, then the browser will only call the handler function and will not actually take you to the link mentioned in href.
If you want the default action to take place in click binding, then you just need to return true from your handler function.
Example
Let us look at the following example which demonstrates the default action performed by click binding.
<!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.tutorialspoint.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>

Output
Let's carry out the following steps to see how the above code works −
Save the above code in click-default-bind.htm file.
Save the above code in click-default-bind.htm file.
Open this HTML file in a browser.
Open this HTML file in a browser.
Click the link and a message will be shown on the screen. The URL mentioned in href opens in a new window.
Click the link and a message will be shown on the screen. The URL mentioned in href opens in a new window.
KO will allow the click event to bubble up to the higher level event handlers. Meaning if you have 2 click events nested, then the click handler function for both of them will be called. If needed, this bubbling can be prevented by adding an extra binding called as clickBubble and passing false value to it.
Example
Let us look at the following example which demonstrates the use of clickBubble binding.
<!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>

Output
Let's carry out the following steps to see how the above code works −
Save the above code in click-cllickbubble-bind.htm file.
Save the above code in click-cllickbubble-bind.htm file.
Open this HTML file in a browser.
Open this HTML file in a browser.
Click the button and observe that adding of clickBubble binding with value false prevents the event from making it past innerFunction.
Click the button and observe that adding of clickBubble binding with value false prevents the event from making it past innerFunction.

    38 Lectures 
     2 hours 

 Skillbakerystudios
 Print
 Add Notes
 Bookmark this page