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.