Introduction
This chapter demonstrates about the Knockout.js Contro Flow Binding Which has the several types bindings following are the concepts are covered in this chapter.
- if binding
- ifnot binding
- with binding
- foreach binding
Description
if binding is used to present the data conditionally if present condition is true then only data will display or else it won't display and is just similar to the visible binding. The difference between them is, visible binding sets the style visible property but if neither adds or removes the element from the DOM tree the syntax of the if binding as shown below.
[code]
if: <binding-condition>
[/code]
The code below demonstrates the if binding as shown below.
[html]
<!DOCTYPE html>
<head>
<title>KnockoutJS if binding</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script>
</head>
<body>
<p><strong>Books</strong></p>
<table border="1">
<thead>
<th>Book Name</th><th>views</th><th>Ratings</th>
</thead>
<tbody data-bind="foreach: bookArray ">
<tr>
<td><span data-bind="text: bookName"></span></td>
<td><span data-bind="text: views"></span></td>
<td data-bind="if: $data.views > 4 ">Most Reviewed</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function AppViewModel() {
self=this;
self.bookArray = ko.observableArray([
{bookName: 'Java', views: 5},
{bookName: 'Clanguage', views: 5},
{bookName: 'HTML', views: 3} ] );
};
var vm = new AppViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
ifnot binding is quite opposite to the if binding which is an another flavor of the if binding. The syntax of the ifnot binding is as shown below.
[code]
ifnot: <binding-condition>
[/code]
The code below demonstrates the ifnot binding as shown below.
[html]
<!DOCTYPE html>
<head>
<title>KnockoutJS ifnot binding</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script>
</head>
<body>
<p><strong>Books</strong></p>
<table border="1">
<thead>
<th>Book Name</th><th>Views</th><th>Ratings</th>
</thead>
<tbody data-bind="foreach: productArray ">
<tr>
<td><span data-bind="text: bookName"></span></td>
<td><span data-bind="text: views"></span></td>
<td data-bind="ifnot: $data.views < 4 ">Most reviewed</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function AppViewModel() {
self=this;
self.productArray = ko.observableArray([
{bookName: 'Java', views: 5},
{bookName: 'C Language', views: 5},
{bookName: 'HTML', views: 3} ]);
};
var vm = new AppViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
with binding is used bind object child elements with specified objects contexts. with binding is also nested with the other bindings such as if binding and foreach binding and the syntax of with binding is shown below.
[code]
with: <binding-object>
[/code]
The code below demonstrates the with binding as shown below.
[html]
<!DOCTYPE html>
<head>
<title>KnockoutJS with binding</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script>
</head>
<body>
<h1 data-bind="text: siteName"> </h1>
<table border="1">
<thead>
<th>Course Name</th><th>Fees</th><th> Start Date</th>
</thead>
<tbody data-bind="with: courses ">
<tr>
<td><span data-bind="text: courseName"></span></td>
<td><span data-bind="text: Fees"></span></td>
<td><span data-bind="text: startDate"> </span></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function AppViewModel() {
self=this;
self.siteName =ko.observable( 'SPlessons');
self.courses =ko.observable(
{courseName: '.Net', Fees: 0000, startDate: '20-JAN-2017'});
};
var vm = new AppViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
In foreach binding every array item referenced in HTML markup in a loop which is exceptionally helpful while populating rundown or table information. foreach can be nested alongside other control flow bindings the syntax of foreach binding as shown below.
[code]
foreach: <binding-array>
[/code]
The code below demonstrates the foreach binding as shown below.
[html]
<!DOCTYPE html>
<head>
<title>KnockoutJS foreach binding</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script>
</head>
<body>
<p>List of courses available:</p>
<div data-bind="foreach: courseArray ">
<li data-bind="text: $data"><span data-bind="text: $index"></span></li>
</div>
<script type="text/javascript">
function AppViewModel() {
this.courseArray = (['JavaScript','PrototypeJs','KnockoutJS','AngularJS']);
this.courseArray.push('HTML');
};
var vm = new AppViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- foreach can be nested with other control flow bindings.
- Child elements reprocessed based on refreshed context result.
- if binding is similar to the visible binding.