Introduction to Knockout.JS

Before reading this article, I highly recommend reading the previous part of the series on Knockout.JS,

Now we are going to understand binding contexts with special properties and control flow statements.

$Data: View Model object in the current context
$Index: Zero based Index of the current array entry being rendered by a foreach binding. It is automatically updated fromthe observable array.
$ParentContext: Binding context at the parent level.

Control Flow Statement

Foreach:

Step 1: Create one project in VS 2013. I am going to create MVC empty application.

public ActionResult Array()
{
return View();
}

Add action method and view for same action method. By right clicking on project add KnockOut.js & JavaScript files from Manage Nuget packages. Add knockout.js & JavaScript reference to our view.

Step 2: The foreach binding adds a markup for each entry in an array, and binds each copy of that markup to the corresponding array item and shows that values using data-bind. Array elements are automatically print using foreach.

Step 3: I have created view as follows which contains the example of binding view model objects using $Data in current context.

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Example of foreach using $Data</title>
<script src="~/Scripts/jquery-2.2.0.js"></script>
<script src="~/Scripts/knockout-3.4.0.js"></script>
<script>
$(document).ready(function () {
function salaryViewModel() {
var empSalary = this;
empSalary.items = ['25000', '20000', '150000'];
}
ko.applyBindings(new salaryViewModel());
})
</script>
</head>
<body>
<div>
<h4 style="color:brown">Example of foreach using $Data</h4>
<ul data-bind="foreach: items">
<li>The value is
<span data-bind="text: $data"></span>
</li>
</ul>
</div>
</body>
</html>

Step 4: Now run our application,

array

Example of Binding context using $index properties

Step 1: I am going to create another action method and create a new view for the same action method.

public ActionResult UsingIndexProperty()
{
return View();
}

Here array elements automatically increment using index with the help of foreach they are rendered on our view.

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Binding Context using $index</title>
<script src="~/Scripts/jquery-2.2.0.js"></script>
<script src="~/Scripts/knockout-3.4.0.js"></script>
<script>
$(document).ready(function () {
function DataViewModel() {
this.myNumbers = ko.observable(5);
}
ko.applyBindings(new DataViewModel());
})
</script>
</head>
<body>
<div>
<h4 style="color:darkmagenta">Example of Binding Context using $index Property</h4>
<ul data-bind="foreach: new Array(myNumbers())">
<li data-bind='text: $index()+1000'></li>
</ul>
</div>
</body>
</html>

Step 2: Now run our application and we will see output as:

If:

If binding causes a section of markup to appear in View using data-bind whenever if condition evaluates to true if condition is same as visible binding (we had discussed in my Introduction To Knockout.JS - Part 2).

Step 1: I am going to create another action method & create new view for the same action method.

public ActionResult if_Condition()
{
return View();
}

In our view take one button and use data-bind for click event. In another div take if condition in data-bind if value evaluates as true then this will show some text.

Step 2: Add the following code to our view:

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>if condition</title>
<script src="~/Scripts/jquery-2.2.0.js"></script>
<script src="~/Scripts/knockout-3.4.0.js"></script>
<script>
$(document).ready(function () {
ko.applyBindings({
myValue: ko.observable(false)
});
});
</script>
</head>
<body>
<h4>Example of If condition</h4>
<button data-bind="click:myValue"> My Value </button>
<div data-bind="if: myValue">
<br />Welcome to if condition.
</div>
</body>
</html>

Step 3: Now run our application. For the first time it will not show the text.

run application

Whenever we click on button if condition evaluates to TRUE and this will show text message.

Ifnot:

If not, binding causes a section of markup to disappear in View using data-bind of if not condition.

Step 1: I am going to create another action method & creating new view for the same action method.

public ActionResult Not_if()
{
return View();
}

In our view take one checkbox and use data-bind for checing event. In another div take if not condition in data-bind.

Step 2: Add the following code to our view:

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>ifnot condition</title>
<script src="~/Scripts/jquery-2.2.0.js"></script>
<script src="~/Scripts/knockout-3.4.0.js"></script>
<script>
$(document).ready(function () {
ko.applyBindings({
myValue: ko.observable(false)
});
});
</script>
</head>
<body>
<h4>Example of Ifnot condition</h4>
<label>
<input type="checkbox" data-bind="checked: myValue" /> click in checkbox to hide bellow text
</label>
<div data-bind="ifnot: myValue">
<br /> Welcome to ifnot condition.
</div>
</body>
</html>

Step 3: Now run our application. For the first time it will show the text.

Whenever we click checkbox, the text will disappear as:

click in checkbox

Another example of foreach condition

Step 1: Create another action & view for same action method.

public ActionResult ForeachLoop()
{
return View();
}

Add the following code to our view:

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Initialize an Array </title>
<script src="~/Scripts/jquery-2.2.0.js"></script>
<script src="~/Scripts/knockout-3.4.0.js"></script>
<script>
$(document).ready(function () {
ko.applyBindings({
bookDetails: [
{ bookName: 'WCF', author: 'Vithal W.' },
{ bookName: 'AngularJs', author: 'Jeetendra G.' },
{ bookName: 'MVC', author: 'Rupesh K.' }
]
});
})
</script>
</head>
<body>
<div>
<h4 style="color:deepskyblue">Foreach loop example</h4>
<table>
<thead>
<tr style="color:red">
<th>Book Name</th>
<th>Author Name</th>
</tr>
</thead>
<tbody data-bind="foreach: bookDetails">
<tr>
<td data-bind="text: bookName"></td>
<td data-bind="text: author"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

This example shows iterating over an array.

Now run our application and see the output:

Run

Summary

This article will help fresher candidates to understand KnockOut.Js.