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.

Live Demo 
<!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.

  • Open this HTML file in a browser.

  • Click the Click here button and a message will be shown on the screen.

Observations

Current Item can also be passed as a parameter

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.

Live Demo 
<!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.

  • 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.

  • Note that the $parent binding context is used to reach the handler function.

Passing more parameters

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.

Live Demo 
<!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.

  • Open this HTML file in a browser.

  • Pressing of the control key is captured by this binding.

Allowing the default click action

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.

Live Demo 
<!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.

  • 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.

Preventing the event from bubbling

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.

Live Demo 
<!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.

  • 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.

knockoutjs_declarative_bindings.htm
Advertisements