Introduction
In today's article you will learn how to bind various types of HTML Controls with Knockoutjs.
As you know there are many types of HTML Controls so you must be wondering how to bind each of them using Knockoutjs. So this article will help you in doing that.
Step 1
First of all you need to add Knockout to the ASP.NET Application. Tod do you can either download it from it's Home Site or you can download my Zip File provided above and fetch it from there and use it in your application.
After downloading this file go to your application and right-click on and select "Add Existing Items", then browse to the file where you stored it and add it.
![knockout1.jpg]()
Now this file will be added to the Solution of your application, now drag it to the Head section of your application.
<head runat="server">
<title></title>
<script src="knockout-2.3.0.js"></script>
</head>
Many things can be done with Observables as described in the following.
1. Observables that get Update on Change
First of all we will work on the View Model of our Application. Add this code to your View Model Section.
<script>
function x() {
this.stringValue = ko.observable("Hello");
};
ko.applyBindings(new x());
</script>
Here I created a function named x(). Then in that function I created two Observables named "stringValue" and "passwordValue". By default I provided them a value that will be seen when the page runs.
Then binding is done to this function.
Now we will move to our "View" Section.
Here the code will be like this:
<table>
<tr>
<td class="label">Text value:</td>
<td><span data-bind="text:stringValue"></span></td>
</tr>
<tr>
<td class="label">Text value (updates on change):</td>
<td><input data-bind="value:stringValue" /></td>
</tr>
</table>
Here I used a Span and a TextBox and in both of these a "stringValue" Value is passed.
Since I made the String Value Observable, any changes made in the TextBox at the run time will be shown instantly in the Span.
Output
When you run the application you will see this type of output as in the following:
![html control knockout1.jpg]()
Now you can change in the TextBox but you will see that Span Value is not changing.
![html control knockout2.jpg]()
But as you click outside or press Enter then you will see that the Span Value is changed.
![html control knockout3.jpg]()
2. Observable That gets Update On Key Stroke.
Now you will see changes on the Key Stroke. Here the changes will be seen at the same time in the Span as when you are changing the values in the TextBox.
Write this code in the View Section of your application.
<tr>
<td class="label">Text value (updates on keystroke):</td>
<td><input data-bind='value:stringValue, valueUpdate: "afterkeydown"' /></td>
</tr>
This code let's you bind the TextBox with the "stringVlaue" but will show the changes on the keypress.
Let's see the output and check how the changes are different now.
Output
First, this type of screen will be available in front of you.
![html control knockout4.jpg]()
Now when you start making changes in the TextBox then the changes will be instantly seen in the Label and both the Textboxes.
![html control knockout5.jpg]()
![html control knockout6.jpg]()