Событие click
Привязка click добавляет обработчик нажатия на любой связанный элемент веб-страницы. Как правило, в роли таких элементов выступают кнопки, ссылки, элементы input, но также это может быть любой видимый элемент веб-страницы.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Привязка в KnockoutJS</title>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js"></script>
</head>
<body>
<p><button data-bind="click: clickHandler">Нажать</button><p>
<p>Количество нажатий: <span data-bind="text: numberOfClicks"></span><p>
<script type="text/javascript">
var viewModel = {
numberOfClicks : ko.observable(0),
clickHandler : function() {
var previousCount = this.numberOfClicks();
this.numberOfClicks(previousCount + 1);
}
};
ko.applyBindings(viewModel);
</script>
</body>
</html>
Передача параметра в обработчик
При вызове функции обработчика Knockout передает ему в качестве первого параметра текущее значение модели:
<div data-bind="foreach: phones">
<p>
<span data-bind="text: $data"></span>
<button data-bind="click: $parent.select">Выбрать</button>
</p>
</div>
<script type="text/javascript">
var viewModel = {
phones: ko.observableArray(["Honor 6", "Meizu Pro 6", "iPhone 6S"]),
select : function(selectedPhone) {
alert("Вы выбрали " + selectedPhone);
}
};
ko.applyBindings(viewModel);
</script>
Также в качестве второго параметра мы можем получить данные о событии:
var viewModel = {
phones: ko.observableArray(["Honor 6", "Meizu Pro 6", "iPhone 6S"]),
select : function(selectedPhone, event) {
console.log(event);
}
};
Всплытие событий
По умолчанию Knockout обрабатывает события последовательно начиная с вложенных элементов и заканчивая родительскими элементами, которые также могут иметь привязку click. Например:
<div data-bind="click: divClickHandler">
<button data-bind="click: buttonClickHandler">
Нажать
</button>
</div>
То есть при нажатии на кнопку сначала срабатывает функция buttonClickHandler, потом срабатывает функция родительского элемента - divClickHandler.
Чтобы избежать подобной множественной обработки события необходимо применять дополнительный параметр - clickBubble,
передав ему значение false:
<div data-bind="click: divClickHandler">
<button data-bind="click: buttonClickHandler, clickBubble: false">
Нажать
</button>
</div>
- Глава 1. Введение в KnockoutJS
- Глава 2. Основы привязки
- Глава 3. Работа с формами
- Глава 4. Взаимодействие с сервером