KnockoutJS - Reliure par clic
La liaison de clic est l'une des liaisons les plus simples et est utilisée pour appeler une fonction JavaScript associée à un élément DOM en fonction d'un clic. Cette liaison fonctionne comme un gestionnaire d'événements.
Ceci est le plus couramment utilisé avec des éléments tels que button, input, et a, mais fonctionne en fait avec n'importe quel élément DOM visible.
Syntax
click: <binding-function>Parameters
Le paramètre ici sera une fonction JavaScript qui doit être appelée en fonction d'un clic. Cela peut être n'importe quelle fonction et n'a pas besoin d'être une fonction ViewModel.
Example
Regardons l'exemple suivant qui illustre l'utilisation de la liaison par 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
Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -
Enregistrez le code ci-dessus dans click-bind.htm fichier.
Ouvrez ce fichier HTML dans un navigateur.
Cliquez sur le bouton Cliquez ici et un message s'affichera à l'écran.
Observations
L'élément actuel peut également être passé en paramètre
Il est également possible de fournir une valeur de modèle actuelle en tant que paramètre lorsque la fonction de gestionnaire est appelée. Ceci est utile lorsqu'il s'agit d'une collection de données, dans laquelle la même action doit être effectuée sur un ensemble d'éléments.
Example
Regardons l'exemple suivant pour mieux le comprendre.
<!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
Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -
Enregistrez le code ci-dessus dans click-for-current-item.htm fichier.
Ouvrez ce fichier HTML dans un navigateur.
removeProduct La fonction est appelée à chaque fois que le lien Supprimer est cliqué et est appelée pour cet élément particulier du tableau.
Notez que le contexte de liaison $ parent est utilisé pour atteindre la fonction de gestionnaire.
Passer plus de paramètres
L'événement DOM ainsi que la valeur actuelle du modèle peuvent également être passés à la fonction de gestionnaire.
Example
Jetons un œil à l'exemple suivant pour mieux le comprendre.
<!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
Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -
Enregistrez le code ci-dessus dans click-bind-more-params.htm fichier.
Ouvrez ce fichier HTML dans un navigateur.
L'appui sur la touche de contrôle est capturé par cette liaison.
Autoriser l'action de clic par défaut
KnockoutJS empêche l'événement de clic d'effectuer une action par défaut par défaut. Signification si la liaison Click est utilisée sur<a> tag, alors le navigateur n'appellera que la fonction handler et ne vous amènera pas réellement au lien mentionné dans href.
Si vous voulez que l'action par défaut ait lieu dans la liaison de clic, il vous suffit de renvoyer true à partir de votre fonction de gestionnaire.
Example
Examinons l'exemple suivant qui illustre l'action par défaut effectuée par la liaison de 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
Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -
Enregistrez le code ci-dessus dans click-default-bind.htm fichier.
Ouvrez ce fichier HTML dans un navigateur.
Cliquez sur le lien et un message s'affichera à l'écran. L'URL mentionnée dans href s'ouvre dans une nouvelle fenêtre.
Empêcher l'événement de bouillonner
KO permettra à l'événement de clic de remonter jusqu'aux gestionnaires d'événements de niveau supérieur. Cela signifie que si vous avez 2 événements de clic imbriqués, la fonction de gestionnaire de clic pour les deux sera appelée. Si nécessaire, ce bullage peut être évité en ajoutant une liaison supplémentaire appelée clickBubble et en lui passant une valeur false.
Example
Regardons l'exemple suivant qui illustre l'utilisation de la liaison 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
Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -
Enregistrez le code ci-dessus dans click-cllickbubble-bind.htm fichier.
Ouvrez ce fichier HTML dans un navigateur.
Cliquez sur le bouton et observez que l'ajout de la liaison clickBubble avec la valeur false empêche l'événement de dépasser innerFunction.