KnockoutJS: fai clic su Binding

Il click binding è uno dei binding più semplici e viene utilizzato per richiamare una funzione JavaScript associata a un elemento DOM in base a un clic. Questa associazione funziona come un gestore di eventi.

Questo è più comunemente usato con elementi come button, input, e a, ma funziona effettivamente con qualsiasi elemento DOM visibile.

Syntax

click: <binding-function>

Parameters

Il parametro qui sarà una funzione JavaScript che deve essere richiamata in base a un clic. Può essere qualsiasi funzione e non è necessario che sia una funzione ViewModel.

Example

Esaminiamo il seguente esempio che dimostra l'uso dell'associazione dei 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

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

Salva il codice sopra in formato click-bind.htm file.
Apri questo file HTML in un browser.
Fare clic sul pulsante Fare clic qui e sullo schermo verrà visualizzato un messaggio.

Osservazioni

L'elemento corrente può anche essere passato come parametro

È anche possibile fornire un valore del modello corrente come parametro quando viene chiamata la funzione del gestore. Ciò è utile quando si ha a che fare con una raccolta di dati, in cui la stessa azione deve essere eseguita su un insieme di elementi.

Example

Guardiamo il seguente esempio per capirlo meglio.

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

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

Salva il codice sopra in formato click-for-current-item.htm file.
Apri questo file HTML in un browser.
removeProduct viene chiamata ogni volta che si fa clic sul collegamento Rimuovi e viene chiamata per quel particolare elemento nell'array.
Si noti che il contesto di associazione $ parent viene utilizzato per raggiungere la funzione del gestore.

Passaggio di più parametri

L'evento DOM insieme al valore del modello corrente può anche essere passato alla funzione gestore.

Example

Diamo uno sguardo al seguente esempio per capirlo meglio.

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

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

Salva il codice sopra in formato click-bind-more-params.htm file.
Apri questo file HTML in un browser.
La pressione del tasto di controllo viene catturata da questa associazione.

Consentire l'azione di clic predefinita

KnockoutJS impedisce all'evento clic di eseguire qualsiasi azione predefinita per impostazione predefinita. Significato se si utilizza l'associazione clic<a> tag, il browser chiamerà solo la funzione handler e non ti porterà effettivamente al collegamento menzionato in href.

Se si desidera che l'azione predefinita avvenga nel collegamento dei clic, è sufficiente restituire true dalla funzione del gestore.

Example

Esaminiamo il seguente esempio che dimostra l'azione predefinita eseguita dall'associazione dei clic.

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

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

Salva il codice sopra in formato click-default-bind.htm file.
Apri questo file HTML in un browser.
Fare clic sul collegamento e verrà visualizzato un messaggio sullo schermo. L'URL menzionato in href si apre in una nuova finestra.

Impedire all'evento di ribollire

KO consentirà all'evento clic di raggiungere i gestori di eventi di livello superiore. Significa che se hai 2 eventi di clic nidificati, verrà chiamata la funzione di gestione dei clic per entrambi. Se necessario, questo bubbling può essere prevenuto aggiungendo un'ulteriore associazione chiamata clickBubble e passandovi un valore falso.

Example

Diamo un'occhiata al seguente esempio che dimostra l'uso dell'associazione 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

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

Salva il codice sopra in formato click-cllickbubble-bind.htm file.
Apri questo file HTML in un browser.
Fare clic sul pulsante e osservare che l'aggiunta dell'associazione clickBubble con valore false impedisce all'evento di superare innerFunction.

↰ Previous page

KnockoutJS: fai clic su Binding

Osservazioni

L'elemento corrente può anche essere passato come parametro

Passaggio di più parametri

Consentire l'azione di clic predefinita

Impedire all'evento di ribollire

Tutorial di KnockoutJS