KnockoutJS Essentials

Event binding

To catch and handle all these different events, Knockout has the event binding. We are going to use it to show and hide the debug panel when the mouse goes over and out of text, with the help of the following code:

1. The first update of the index.html template is as follows. Replace the debug div with this new HTML:

   <div data-bind="event: {
     mouseover:showDebug,
     mouseout:hideDebug
   }">
     <h3 style="cursor:pointer">
       Place the mouse over to display debug
     </h3>
     <pre class="well well-lg" data-bind="visible:debug, toJSON: $root"></pre>
   </div>

   This code says that when we set the mouse over the div element, we will show the debug panel. Initially, only the h3 tag content will be displayed.

2. When we set the mouse over the h3 tag, we will update the ...