KnockoutJS - Click Binding
A vinculação de clique é uma das vinculações mais simples e é usada para invocar uma função JavaScript associada a um elemento DOM com base em um clique. Essa ligação funciona como um manipulador de eventos.
Isso é mais comumente usado com elementos como button, input, e a, mas realmente funciona com qualquer elemento DOM visível.
Syntax
click: <binding-function>Parameters
O parâmetro aqui será uma função JavaScript que precisa ser chamada com base em um clique. Pode ser qualquer função e não precisa ser uma função ViewModel.
Example
Vejamos o exemplo a seguir, que demonstra o uso da vinculação de clique.
<!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
Vamos realizar as etapas a seguir para ver como o código acima funciona -
Salve o código acima em click-bind.htm Arquivo.
Abra este arquivo HTML em um navegador.
Clique no botão Clique aqui e uma mensagem será exibida na tela.
Observações
O item atual também pode ser passado como um parâmetro
Também é possível fornecer um valor de modelo atual como um parâmetro quando a função do manipulador é chamada. Isso é útil ao lidar com uma coleção de dados, em que a mesma ação precisa ser realizada em um conjunto de itens.
Example
Vejamos o exemplo a seguir para entendê-lo melhor.
<!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
Vamos realizar as etapas a seguir para ver como o código acima funciona -
Salve o código acima em click-for-current-item.htm Arquivo.
Abra este arquivo HTML em um navegador.
removeProduct A função é chamada sempre que o link Remover é clicado e é chamado para aquele item específico na matriz.
Observe que o contexto de ligação $ parent é usado para alcançar a função de manipulador.
Passando mais parâmetros
O evento DOM junto com o valor do modelo atual também pode ser passado para a função de manipulador.
Example
Vamos dar uma olhada no exemplo a seguir para entendê-lo melhor.
<!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
Vamos realizar as etapas a seguir para ver como o código acima funciona -
Salve o código acima em click-bind-more-params.htm Arquivo.
Abra este arquivo HTML em um navegador.
Pressionar a tecla de controle é capturado por esta ligação.
Permitindo a ação de clique padrão
KnockoutJS impede que o evento de clique execute qualquer ação padrão por padrão. Significa se a ligação de clique é usada em<a> tag, o navegador só chamará a função de manipulador e não o levará de fato ao link mencionado em href.
Se você deseja que a ação padrão ocorra na vinculação de clique, basta retornar true de sua função de manipulador.
Example
Vejamos o exemplo a seguir, que demonstra a ação padrão realizada pela vinculação de clique.
<!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
Vamos realizar as etapas a seguir para ver como o código acima funciona -
Salve o código acima em click-default-bind.htm Arquivo.
Abra este arquivo HTML em um navegador.
Clique no link e uma mensagem será exibida na tela. O URL mencionado em href é aberto em uma nova janela.
Evitando que o evento borbulhe
KO permitirá que o evento de clique borbulhe para os manipuladores de eventos de nível superior. Ou seja, se você tiver 2 eventos de clique aninhados, a função de manipulador de clique para ambos será chamada. Se necessário, esse borbulhamento pode ser evitado adicionando-se uma ligação extra chamada clickBubble e passando um valor falso para ela.
Example
Vejamos o exemplo a seguir, que demonstra o uso da vinculação 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
Vamos realizar as etapas a seguir para ver como o código acima funciona -
Salve o código acima em click-cllickbubble-bind.htm Arquivo.
Abra este arquivo HTML em um navegador.
Clique no botão e observe que a adição de ligação clickBubble com valor false evita que o evento passe de innerFunction.