Introduction
In my previous article I told you How to Bind Various type of HTML Controls with Knockoutjs.
This article is a continuation of that article. In today's article I will tell you about binding some more HTML Controls with Knockoutjs.
In my previous article I bound the Labels and Textboxes in two different ways, one through the Observables that are updated on the click of Enter and the second through the Observables that will begin updating as soon as you make changes in them.
Now let's start doing binding with various controls.
1. Binding TextArea Using Knockout
First we will work on the View Model so write this code in your ViewModel.
Currently our View Model will be the same as before because we are using the same values that were provided the last time. So, no changes are required in the ViewModel.
<script>
function x() {
this.stringValue = ko.observable("Hello"); };
ko.applyBindings(new x());
</script>
In this code I had created a function x(), in this function I had declared an Observable named "stringValue".
Then I applied binding to this function.
Now Let's have a look at the View of this example.
<tr>
<td class="label">Text value (multi-line):</td>
<td><textarea data-bind="value: stringValue"> </textarea></td>
</tr>
Here I used a Textarea and then I bound this Textarea with the stringValue.
Let's have a look at the output.
On running the application you will see an output window like this:
![html control knockout7.jpg]()
Now I am making changes in the Textarea.
![html control knockout8.jpg]()
But no changes are made in any of the TextBoxes or Labels, but as you click outside the Textarea then you can see that all the values of the Textboxes and Labels are changed, this is due to Automatic Synchronization provided by the Knockout.
![html control knockout9.jpg]()
2. Show Changed Password Using Knockout
Now I will show you how you can get the password that is currently changed in the TextBox.
For this to happen we will first work on the ViewModel.
Add this code to your viewModel:
this.passwordValue = ko.observable("mypass");
This code will create an Observable named "passwordValue". This passwordValue contains some default value that is provided in the " ".
As we had already worked on the View Model previously, your complete code of the View Model will be like this:
<script>
function x() {
this.stringValue = ko.observable("Hello");
this.passwordValue = ko.observable("mypass");
};
ko.applyBindings(new x());
</script>
Now let's go to the View of our application.
In the View part we will use a new TextBox and a Label.
<tr>
<td class="label">Password:</td>
<td data-bind="text: passwordValue"></td>
</tr>
<tr>
<td class="label">Password:</td>
<td><input type="password" data-bind="value: passwordValue" /></td>
</tr>
This code will create a Label and a TextBox and both are bound to the passwordValue, so if you make any changes in the TextBox at the run time then changes will be seen instantly in the Label.
Let's have a look at the output.
On running the application you will see the output like this:
![html control knockout10.jpg]()
Now I am making changes in the TextBox that contains the Password Value.
![html control knockout11.jpg]()
Until now no changes can be seen in any other Label or TextBox but as I click outside this TextBox then you can see the changes in the Label that is bound to the password value.
![html control knockout12.jpg]()
The complete code of my application is as follows:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication30.WebForm2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="knockout-2.3.0.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="readout">
<table>
<tr>
<td class="label">Text value:</td>
<td><span data-bind="text:stringValue"></span></td>
</tr>
<tr>
<td class="label">Password:</td>
<td data-bind="text: passwordValue"></td>
</tr>
</table>
</div>
<table>
<tr>
<td class="label">Text value (updates on change):</td>
<td><input data-bind="value:stringValue" /></td>
</tr>
<tr>
<td class="label">Text value (updates on keystroke):</td>
<td><input data-bind='value:stringValue, valueUpdate: "afterkeydown"' /></td>
</tr>
<tr>
<td class="label">Text value (multi-line):</td>
<td><textarea data-bind="value: stringValue"> </textarea></td>
</tr>
<tr>
<td class="label">Password:</td>
<td><input type="password" data-bind="value: passwordValue" /></td>
</tr>
</table>
<script>
function x() {
this.stringValue = ko.observable("Hello");
this.passwordValue = ko.observable("mypass");
};
ko.applyBindings(new x());
</script>
</form>
</body>
</html>
You can copy this code and execute it in your application and see the things happening live.