Button down and up events, with and model example

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

In this article I want to show example of with binding, buttondown and buttonup (useful for touchscreens, but in that case you will use touchstart, touchend).

HTML:

<!DOCTYPE html>
<html>

	<head>
		<script type="text/javascript" src="/myButtons.js"></script>
		<script type="text/javascript" src="/index.js"></script>
		<script type="text/javascript" src="/knockout-3.2.0.js"></script>
	</head>
	
	<body onload="doTheApply()">
		<span data-bind="template: { name: 'myTemplate'}"></span>
		
		<script type="text/html" id="myTemplate">
			<div data-bind="with: myButtons">
				<div data-bind="event: {mousedown: down}">I will be executed on mouse down</div>
				<div data-bind="event: {mouseup: up}">I will be executed on mouse up</div>
			</div>
		</script>		

	</body>

</html>

Here notice with: myButtons.

myButtons.js:

window.myWithButtonsModel = window.myWithButtonsModel || {};

(function(ns) {
	ns.myWithButtonsModel = function() {
		var myButtons = new Button();
	
		function Button() {
		
			return {
				down: function() {
					console.log("Hi, I am called on button down event.");
				},
				up: function() {
					console.log("Hi, I am called on button up event.");
				}
			}
		}
		
		return {
			myButtons: myButtons,
		}		
		
	}

}(window));

Here notice how I introduced method myButtons

index.js:

function doTheApply() {
	model = new window.myWithButtonsModel();
	ko.applyBindings(model);
}

And here notice how applied model, this is basically same as from knockout example.

Example download from here.