Binding Various HTML Controls With Knockoutjs, Part 3

Introduction

In my previous two articles I told you about binding various types of HTML Controls with Knockout. You can go through them before reading this article. Click on the following links to reach those articles.

Today's article is also a continuation of those articles. In this article I explain the binding of some more HTML Controls with Knockout.

1. Binding Checkbox and Finding Boolean Value Using Knockoutjs

Here we will bind a Checkbox with Knockout and find the Boolean Value that will be provided by checking or unchecking the Checkbox.

First of all we will work on the ViewModel of our Application. We are working on the same Application on which we had worked on earlier in the previous articles so just add this single line of code in the function that was already created.

this.booleanValue = ko.observable(true);

This code will create an Observable named booleanValue whose default value will remain True.

So, now your View Model will be like this:

function x() {

this.stringValue = ko.observable("Hello");

this.passwordValue = ko.observable("mypass");

this.booleanValue = ko.observable(true);

};

ko.applyBindings(new x());

</script>

Now it's time to move to the second part in other words to the "View" of our application. Here we will add a Checkbox and a Label that will show the Boolean Value as True or False.

Write this code in the View Part of your application.

<tr>

<td class="label">Bool value:</td>

</tr>

<tr>

<td class="label">Checkbox:</td>

</tr>

Here, first a Label is used bound to the booleanValue and will show the Result as either False or True depending on the changes made in the Checkbox.

Then I had taken a Checkbox that is also bound to the bolleanValue.

Now you can run your application to see the output. On running the application you will see the output like this:

html control knockout13.jpg

Here you can see that the Checkbox is checked by default and the Label is showing True. Now we will Uncheck the Checkbox and see the change.

html control knockout14.jpg

You will see that since I had unchecked the Checkbox, the Label's value is also changed and it starts showing the value False.

2. Bind DropDown List Using Kncokout

Now we will try to bind the DropDown List using Knockout, so again we will first work on the ViewModel of our application.

Add this code to your application:

this.optionValues = ["Male", "Female", "Common"];

this.selectedOptionValue = ko.observable("Male");

Here first I had declared some values in the "optionValues" then I created an Observable named "selectedOptionValue" that selects a value from the available options by default.

Now we will work on the "View" of our application. In the View I will add a DropDown and a Label that will show the Selected Value.

<tr>

<td class="label">Selected option:</td>

</tr>

<tr>

</tr>

Here in the Label I had bound it with the Observable named selectedOptionValue and the Drop Down will get the options available in the "optionValues" and bound to the "selectedOptionvalue".

After this you can run your application and see the output.

First you will get output like this:

html control knockout15.jpg

Now if you click on the DropDown then you will get a list that was provided in the "optionValues".

html control knockout16.jpg

If you select any other value from the DropDown List then you will see the change in the Label to which "selectedOptionValue" was bound.

html control knockout17.jpg