Control Flow Bindings in KnockoutJS

There are four types of control flow bindings that knockout JS provide.

ForEach binding.
If Binding.
IfNot Binding.
With Binding.

Let’s have a look to each binding one by one.

The ForEach Binding

This binding is similar to the forEach looping statement we use in JavaScript. It allow us to iterate throughout the array it is bind to, and thus repeats the HTML markup within, for specified number of times. Let’s say we have a ViewModel as:

   1: var ViewModel = function(){

2:

   3:     this.honeySinghSongsArray = ko.observableArray();

4:

   5:     this.honeySinghSongsArray.push(new Song('Blue Eyes'));

   6:     this.honeySinghSongsArray.push(new Song('Brown Rang'));

   7:     this.honeySinghSongsArray.push(new Song('High Heels'));

8:

   9: }

10:

  11: var Song = function(name){

  12:     this.name = name;

  13: }

14:

  15: ko.applyBindings(new ViewModel());

Above, we have an array of Songs by Honey Singh in the view Model. Now in the View, we have following ForEach binding to display the songs onto the screen.

   1: <html xmlns="http://www.w3.org/1999/xhtml">

2:

   3:     <head>

   4:         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   5:         <title>Untitled Document</title>

   6:     </head>

7:

8:

   9:     <body>

10:

  11:         <div data-bind="foreach: honeySinghSongsArray">

  12:              <h3 data-bind="text: name"></h3>

  13:         </div>

14:

  15:         <script src="js/knockout 3.0.0.0.js"></script>

  16:         <script src="js/ViewModel.js"></script>

17:

18:

  19:     </body>

  20: </html>

Since the array has 3 values, the tag <h3> would repeat three times displaying each values on the screen.

The If and IfNot Bindings

These are logical bindings allowing to set the HTML markup’s visibility. Consider the following ViewModel for instance.

   1: var ViewModel = function(){

2:

   3:     this.isChecked = ko.observable();

4:

   5:     }

6:

   7: ko.applyBindings(new ViewModel());

8:

And the view.

   1: <html xmlns="http://www.w3.org/1999/xhtml">

2:

   3:     <head>

   4:         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   5:         <title>Untitled Document</title>

   6:     </head>

7:

8:

   9:     <body>

10:

  11:         <input type="checkbox" data-bind="checked: isChecked">

  12:                         Click me to show message</input>

13:

  14:         <h3 data-bind="if: isChecked">This is the Message</h3>

15:

  16:         <h3 data-bind="ifnot: isChecked">It is not checked</h3>

17:

  18:         <script src="js/knockout 3.0.0.0.js"></script>

  19:         <script src="js/ViewModel.js"></script>

20:

21:

  22:     </body>

  23: </html>

The observable in the ViewModel “isChecked” is bind with the checkbox. If the checkbox is checked, the observable “isChecked” will have the value as ‘true’ else will possess ‘false’. “isChecked” is also bind with two <h3> tags, one with “If” binding and another with “Ifnot” binding. With “If” binding, the tag <h3> would display only if the value of “isChecked” is true, that is, when the checkbox is checked. With the “Ifnot” binding on the contrary, the tag <h3> would display if the value of “isChecked” is false, that is, when the checkbox is not checked.

When you see the above View in browser, this is what you see.