KnockoutJS - Enlace de clic

El enlace de clic es uno de los enlaces más simples y se utiliza para invocar una función de JavaScript asociada con un elemento DOM basado en un clic. Este enlace funciona como un controlador de eventos.

Esto se usa más comúnmente con elementos como button, inputy a, pero en realidad funciona con cualquier elemento DOM visible.

Syntax

click: <binding-function>

Parameters

El parámetro aquí será una función de JavaScript que debe invocarse con un clic. Puede ser cualquier función y no es necesario que sea una función ViewModel.

Example

Veamos el siguiente ejemplo que demuestra el uso del enlace de clic.

<!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

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código anterior en click-bind.htm archivo.
Abra este archivo HTML en un navegador.
Haga clic en el botón Haga clic aquí y se mostrará un mensaje en la pantalla.

Observaciones

El elemento actual también se puede pasar como parámetro

También es posible proporcionar un valor de modelo actual como parámetro cuando se llama a la función del controlador. Esto es útil cuando se trata de una colección de datos, en la que se debe realizar la misma acción en un conjunto de elementos.

Example

Miremos el siguiente ejemplo para entenderlo mejor.

<!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

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código anterior en click-for-current-item.htm archivo.
Abra este archivo HTML en un navegador.
removeProduct La función se llama cada vez que se hace clic en el enlace Eliminar y se llama para ese elemento en particular en la matriz.
Tenga en cuenta que el contexto de enlace $ parent se utiliza para llegar a la función del controlador.

Pasando más parámetros

El evento DOM junto con el valor del modelo actual también se puede pasar a la función del controlador.

Example

Echemos un vistazo al siguiente ejemplo para entenderlo mejor.

<!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

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código anterior en click-bind-more-params.htm archivo.
Abra este archivo HTML en un navegador.
Esta vinculación captura la pulsación de la tecla de control.

Permitir la acción de clic predeterminada

KnockoutJS evita que el evento de clic realice cualquier acción predeterminada de forma predeterminada. Significado si se utiliza el enlace de clic en<a> , entonces el navegador solo llamará a la función del controlador y no lo llevará al enlace mencionado en href.

Si desea que la acción predeterminada se lleve a cabo en el enlace de clics, solo necesita devolver verdadero desde la función de su controlador.

Example

Veamos el siguiente ejemplo que demuestra la acción predeterminada realizada al hacer clic en enlace.

<!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

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código anterior en click-default-bind.htm archivo.
Abra este archivo HTML en un navegador.
Haga clic en el enlace y se mostrará un mensaje en la pantalla. La URL mencionada en href se abre en una nueva ventana.

Evitar que el evento burbujee

KO permitirá que el evento de clic suba a los controladores de eventos de nivel superior. Es decir, si tiene 2 eventos de clic anidados, se llamará a la función del controlador de clic para ambos. Si es necesario, este burbujeo se puede prevenir agregando un enlace adicional llamado clickBubble y pasándole un valor falso.

Example

Veamos el siguiente ejemplo que demuestra el uso del enlace 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>

Output

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código anterior en click-cllickbubble-bind.htm archivo.
Abra este archivo HTML en un navegador.
Haga clic en el botón y observe que la adición del enlace clickBubble con valor falso evita que el evento pase a innerFunction.

↰ Previous page