How to Integrate Knockoutjs With Third Party Components

Introduction

This article explains how to integrate Knockout with third-party components.

One of the best features of Knockout is that it has no problem with any other Client-side or Server-side Technology, it has no competition with jQuery or JavaScript, in fact it integrates with them and works with them.

If we want our "View" to have external JavaScript Library Components and want to bind those components with our "View Model" then we will need Custom Bindings to do that.

Custom Binding works as an intermediate between our "View Model" and "Third-party Components".

Now let's see a small example on Custom Bindings:

Step 1

First of all you need to add Knockout to the ASP.NET Application. For that you can either download it from it's Home Site or you can download my Zip File provided above and then fetch it and use it in your application.

After downloading this file go to your application and right-click on it and select "Add Existing Items", then browse to the file where you stored it and add it.

Now this file will be added to the Solution Explorer of your application, now drag it to the Head Section of your application.

</head>

Step 2

Now in this article we will simply create a jQuery UI Button in our Knockout Application.

Now suppose that earlier I had taken a small button in ASP.NET that will look like this:

Now we will change this button to a jQuery UI Button; for that you first need to work on the View Model of your application.

ko.bindingHandlers.jqButton = {

init: function (element, valueAccessor) {

var options = valueAccessor();

$(element).button(options);

ko.utils.domNodeDisposal.addDisposeCallback(element, function () {

$(element).button("destroy");

});

var x = {

greet: function () {

alert("Hi! How Are You???"); }

};

</script>

For Custom Bindings you will always require bindingHandlers to start your Custom Bindings.

In Custom Bindings there are two types of Callback Functions in which the first one is "init" and the second one is "update".

Here only init is used since we don't need to update anything.

What I have done is, when the user clicks on the button then an alert box will be opened where some text will be shown.

So, until now our work on the View Model is completed. Now we will move towards the View of our application.

Step 3

</head>

<body>

Here I took a button in which the greet function is bound to the click event of the button. After that you will see that I made a jqButton: true that will make the jQuery UI Button available. After that some CSS is appied.

Output

Now if you run the application you will get output something like this:

Now when you click on the button you will get an alert box that will display the text that you had already provided in the ViewModel.