Introduction
In today's article you will learn about how to apply Custom Bindings using Knockoutjs in an ASP.NET application.
If we want to use external JavaScript Library Components in our application then we should bind them using the View Model.
But these components can't be bound as simply as the other components are bound, for this we need to use the "Custom Binding" in our View Model.
Custom Binding works as an intermediate between the ViewModel and a third-party component.
In Custom Binding "ko.bindingHandlers" are used for doing the required work.
Now let's see how Custom Binding is to be used by seeing an example.
Step 1
First of all we will work on the ViewModel of our application as in the following:
<script type="text/javascript">
ko.bindingHandlers.jqButton = {
init: function (element, valueAccessor) {
var options = valueAccessor();
$(element).button(options);
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).button("destroy");
});
},
update: function(element, valueAccessor) {
ko.utils.unwrapObservable(valueAccessor());
$(element).hide().fadeIn(500);
}
};
var x = {
name: ko.observable("Anu"),
greet: function () {
alert("Hi! how Are You?"); }
};
ko.applyBindings(x);
Custom Binding uses two types of CallBack Functions, init and update.
As you can see, first I had used the init Call Back Function. This init Call Back Function is used for the Button that will open an alert box, this button is the jQuery UI Button.
After that I had used the update Call Back Function that will work for UnWrapping the Observable Value.
Then I had provided the value in the name that is made Observable, in other words it can be changed at run time.
After that I had created a function named as greet in which an alert box is provided that will show some text written inside it.
Until now our work on ViewModel is completed so we should move to the view part of our application.
Step 2
Now you will see the View part of our application.
<body>
<div class="main" data-bind="flash: name">
<h2>Name:- <span data-bind="text: name"></span> </h2>
<input data-bind="value: name" />
<button data-bind="click: greet, jqButton: true" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary">
<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
<span class="ui-button-text">Test</span></button></div>
Here first I had worked for the update function, I had taken a span and a Text Box and in both of these the value of name is bound that was made Observable, if you change the value in the Text Box at runtime then you will see the instant change in the span also. This is made possible because of the automatic synchronization provided by Knockout.
After that I had worked for the init function, I had used a button and on the click event of this button the "greet" function is bound in which the alert box was given.
The complete code of this application is as follows:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication28.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="knockout-2.3.0.js"></script>
<link href="StyleSheet2.css" rel="stylesheet" />
</head>
<body>
<div class="main" data-bind="flash: name">
<h2>Name:- <span data-bind="text: name"></span> </h2>
<input data-bind="value: name" />
<button data-bind="click: greet, jqButton: true" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary">
<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
<span class="ui-button-text">Test</span></button></div>
<script type="text/javascript">
ko.bindingHandlers.jqButton = {
init: function (element, valueAccessor) {
var options = valueAccessor();
$(element).button(options);
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).button("destroy");
});
},
update: function(element, valueAccessor) {
ko.utils.unwrapObservable(valueAccessor());
$(element).hide().fadeIn(500);
}
};
var x = {
name: ko.observable("Anu"),
greet: function () {
alert("Hi! how Are You?"); }
};
ko.applyBindings(x);
</script>
</body>
</html>
Output
Now if you run the application then you will get the output like this:
![custom binding 1.jpg]()
Now if you change the text in the Text Box and click outside the Text Box or on the Button then you will see the change in the text above.
![custom binding 2.jpg]()
Click on the button to get the alert box in which the same text is shown that we had provided in the greet function.
![custom binding 3.jpg]()