KNOCKOUTJS - EVENT BINDING

Size: px

Start display at page:

Download "KNOCKOUTJS - EVENT BINDING"

Dale Miller
6 years ago
Views:

1 KNOCKOUTJS - EVENT BINDING Copyright tutorialspoint.com This binding is used to listen to specific DOM event and call associated handler function based on it. Syntax event: <{DOM-event: handler-function> Parameters Parameter is inclusive of a Javascript object which contains DOM event which will be listened to and a handler function which needs to be invoked based on that event. This function can be any Javascript function and need not be necessarily ViewModel function. Let us see below example which demonstrates use of event binding: <title>knockoutjs Event Binding</title> <p>enter Number :</p> <input data-bind="value: somevalue, event: {keyup: showmessage, valueupdate: 'afterkeydown' " /><br><br> You Entered: <span data-bind="text: somevalue"/> this.somevalue = ko.observable(); this.showmessage = function(data,event){ if ((event.keycode < 47) (event.keycode > 58 )) { //check for number if (event.keycode!== 8) //ignore backspace alert("please enter a number."); this.somevalue(''); ; Save the above code in event-bind.htm file. Try to key in any non numeric value and you will be prompted with an alert.

2 Observations Passing a current item as a parameter to handler function KO will pass the current item as parameter when calling handler function. This is useful when working with collection of items and need to work on each of them. Let see below example in which current item is passed in event binding <title>knockoutjs Event Binding - passing current item </title> <ul data-bind="foreach: icecreams"> <li data-bind="text: $data, event: { mouseover: $parent.logmouseover "> </li> </ul> <p>you seem to be interested in: <span data-bind="text: flavorliked"> </span></p> var self=this; self.flavorliked = ko.observable(); self.icecreams = ko.observablearray(['vanilla', 'Pista', 'Chocolate', 'Mango']); // current item is passed here as the first parameter, so we know which flavor was hovered over self.logmouseover = function (flavor) { self.flavorliked(flavor); ; Save the above code in event-bind-passing-curr-item.htm file. Flavor, which is having mouse over it, is displayed. Note that self as an alias is used for this. This helps to avoid any problems with this being redefined to something else in event handlers.

3 Passing more parameters, or Referring the event object There might be situation wherein you need to access DOM event object associated with event. KO passes the event as second parameter to handler function. Let see below example in which event is sent as second parameter to function <title>knockoutjs Event Binding - passing more params</title> <div data-bind="event: { mouseover: logmouseover "> Press shiftkey + move cursor over this line. </div> self.logmouseover = function (data, event) { if (event.shiftkey){ alert("shift key is pressed."); else { alert("shift key is not pressed."); ; Save the above code in event-bind-passing-more-params.htm file. Press shiftkey + move cursor to the text. See that message will pop up showing if you have pressed the shiftkey.

4 Allowing Default action Knockout will avoid the event from performing any default action, by default. Meaning if you use keypress event for an input tag, then KO will just call the handler function and will not add the key value to input elements value. If you want the event to perform default action, then just return true from handler function. Let see below example in which allows default action to take place <title>knockoutjs Event Binding - allowing default action</title> <p>enter the flavor you like from available menu: (Vanilla, Pista, Chocolate, Mango)</p> <input data-bind="event: { keypress: acceptinput"></input> self.acceptinput = function () { return true; ; Save the above code in event-bind-default-action.htm file. Any key pressed is actually shown in input box because handler function returns true.

5 Preventing the event from bubbling KO will allow the event to bubble up to the higher level event handlers. Meaning if you have two mouseover events nested then event handler function for both of them will be called. If needed this bubbling can be prevented by adding an extra binding called as youreventbubble and passing false value to it. Let see below example in which bubbling is handled <title>knockoutjs Event Binding - preventing bubbling </title> <div data-bind="event: { mouseover: myparenthandler "> <button data-bind="event: { mouseover: mychildhandler, mouseoverbubble: false"> Click me to check bubbling. </button> </div> var self= this; self.myparenthandler = function () { alert("parent Function"); self.mychildhandler = function () { alert("child Function"); ; Save the above code in event-bind-prevent-bubble.htm file. Move the mouse over button and you will see a message. Bubbling is prevented due to use of mouseoverbubble set to false.

Knockout for APEX Dick Dral

+ Knockout for APEX Dick Dral Agenda Introduction Knockout Knockout and APEX several demo s Conclusion About me Dick Dral Almost 30 years of Oracle 10 years self employed Presentations Blogposts: dickdral.blogspot.com