Custom binding

Details
Written by: Stanko Milosev
Category: Knockout
Hits: 5040

One simple example of custom binding.

HTML:

<!DOCTYPE html>
<html>

	<head>
		<script type="text/javascript" src="/knockout-3.2.0.js"></script>
		<script type="text/javascript" src="/index.js"></script>
	</head>

	<body>
		<div data-bind="myBinding: myObservable">Click me</div>
	</body>

</html>

JS:

ko.bindingHandlers.myBinding = {
	init: function (element, valueAccessor) {
		element.addEventListener("click", iWasClicked, false);
		function iWasClicked() {
			alert("I was clicked");
		}
	}
}

window.onload = function() {
	ko.applyBindings();
}

Init part will be always executed from ko.bindingHandlers.myBinding, and inside that method I implemented function iWasClicked.

Binding looks like this: data-bind="myBinding: myObservable" where myObservable actually I don't need.