Introduction
In today's article I will tell you about If and Ifnot binding of Knockoutjs.
Until now you must know that there are many types of bindings in Knockoutjs, so, from these many bindings I am explaining the If and Ifnot Binding.
Step 1
First of all you need to add an external Knockout js file into your application, you can either download it from the internet or download my application that is available at the start of this article in Zip Format and then can use the file attached with this Zip file.
After downloading the file you need to call it in the head section of your application.
<head runat="server">
<title></title>
<script src="knockout-2.3.0.js"></script>
</head>
Step 2
Now we can work on our application. First we will work on the ViewModel. To do that you need to add a Script tag under the Body section and then add this code:
<script>
function x() {
this.address = ko.observable();
this.city = ko.observable("Manipur");
this.State = ko.observable("Aasam");
this.fill = ko.observable(false);
};
ko.applyBindings(new x());
</script>
This much code will work for us, you can see how knockout has reduced the code substantially.
Here I had created a function "x()". In this function I created some Observables, the first three Observables will be used for passing the Address, City and State, in other words the Address of user will be passed through these Observables.
The Fourth Observable is named "fill" and will be used for the Checkbox, by default it is made false; that means that the Checkbox will remain Unchecked until the user clicks on it.
At the end I applied the binding to the function x().
Our work on the ViewModel is now complete and now for the View of our application, in other words the design part of our application where the controls will be provided that are to be bound with the ViewModel.
Step 3
View is the HTML part, write this code in the View part of the application:
<table>
<tr>
<td>
<label>Address:</label>
<input data-bind="value:address" />
</td>
<td >
<label>City:</label>
<input data-bind="value:city" />
</td>
<td >
<label>State:</label>
<input data-bind="value:State" />
</td>
</tr>
<tr>
<td>
<label><input type="checkbox" data-bind="checked:fill" />I want to Skip Mailing Address</label>
</td>
</tr>
<tr data-bind="ifnot:fill">
<td>
<label>Address:</label>
<input data-bind="value:address" />
</td>
<td >
<label>City:</label>
<input data-bind="value:city" />
</td>
<td>
<label>State:</label>
<input data-bind="value:State" />
</td>
</tr>
<tr data-bind="if:fill">
<td>
<h2>O.k Then fill these Fields</h2>
</td>
</tr>
<tr data-bind="if:fill">
<td>
<label>Previous Employee</label>
<input />
</td>
<td>
<label>Year of Experience</label>
<input />
</td>
<td>
<label>Heighest Qualification</label>
<input />
</td>
</tr>
</table>
Here in the first row, in other words the <tr> I took three Input tags that are bound with the Address, City and State separately.
After that in the second row I took a Checkbox bound with the "fill" Observable, but it's bound as checked:fill to help the checkbox to remain unchecked in the begining and be checked only when the user clicks on it.
You can see that third row is bound using data-bind="ifnot:fill". That means that this row will be shown to the user only when the check box is unchecked, otherwise this row and it's elements will not be seen.
Next the two rows are bound using data-bind="if:fill". That means that these two rows will be shown to the user when the Checkbox is checked.
So, if the Checkbox is checked then the last two rows will be seen and if it's not checked then the third row will be seen.
Output
Now you can run your application. On running the application you will get output as follows:
![if and ifnot knockout 1.jpg]()
You can see that the checkbox is unchecked and the third row elements can be seen; that's because they were bound using ifnot.
Now if I check the checkbox then you will see that the third row will disappear and instead of it the fourth and fifth rows are shown; that's because they are bound using if binding.
![if and ifnot knockout 2.jpg]()