Unobtrusive Event Handlers in Knokcoutjs

Introduction

In today's article you will learn about Unobtrusive Event Handlers in Knokcoutjs.

You have now seen that Data Bind provides a clean way to bind to a View model. But if our application is using event handling then it will result in too much data-binding attributes. You might use functions to solve this problem but Knockout provides two alternative helper functions that will allow you to identify the data associated with a DOM element. These two helper functions are as follows:

1. ko.dataFor(element): It returns the data that was available for binding against the element.
2. ko.contextFor(element): it returns the entire binding context that was available to the DOM element.

These two functions can be used in event handlers that are attached unobtrusively using jQuery click or bind and so on.

Now I will explain these thing with an example. I'll create an application where some parents will be containing some childs and when the user clicks on "Add child" then the child will be shown with the parent name. If children are added again and again then they will show whether they are grandchildren or great-grandchildren.

Step 1

First of all, you need to add an external Knockoutjs file and jQuery-1.7.2.min.js into your application, you can either download these from here "Knockoutjs" or can download my application that is available at the start of this article in Zip Format and then can use the file attached with this Zip file.

After downloading the file you need to call it in the head section of your application.

<head runat="server">

<title></title>

<script src="knockout-2.3.0.js"></script>

</head>

Step 2

Now we can work on our application. First we will work on the ViewModel. For that you need to add a Script tag under the Body Section and then add this code:

Here first I created a function named People, in this function two Observables are declared and among these, one is an observable Array. These are named as name and children.

Then one more function is declared named person, in this function some values are provided in the Observable Array.

Then one more function is created named addNew, this function contains a push function of Knockout that is used to add new entries to the Array.

Then event handlers are attached using jQuery. First remove is created on click of button. Here you can see that I had used ko.contextFor(this), since I already explained that contextFor that will return the entire binding context or you can say that it will work on the complete function. Here remove(context.$data) is used that will remove the data from the array.

Then another event handler is used to add the click of button the event. Here also contextFor is used so it will also work on the entire function.

Our work on the View Model is now completed so we can proceed to the View part or Design part of our application.

Step 3