Knockout JS Foreach Loop

Knockout is an easy way to loop through observable arrays or standard array objects using a foreach data bind statement. Let’s look at a concrete, in depth example.

Knockout.js is a JavaScript library that makes it easier to write reusable components in JavaScript. It provides a simple syntax for binding data to HTML elements.

This tutorial will show you how to use knockoutjs with a simple example of the foreach data binding with afterRender.

KO foreach binding example

In order to demonstrate how to use foreach binding, we will start by creating a very simple component. We will then bind some data to our component and display it in the DOM. Finally, we will add a button to remove the element from the DOM. Let’s starting creating a simple example script within our HTML.

To begin, let’s create a very simple component. This component will contain two text boxes and one button. It will also have a click handler attached to the button.

Add Javascript Library

We’ll start by adding knockoutjs to our project. In order to do so we need to add the following script tag to our index.html file and we then need to initialize knockout with the ko object.

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

ko = require('knockout');

Bind Data with array item in our ViewModel

Once we’ve initialized ko with our Javascript, we can use it to bind data type to a view model with the following example. Let’s say we wanted to display a list of names in a table. We would first define a view model.

var viewModel = {
names: ko.observableArray()
};

Run Code

Then we’d initialize our code using the following text Javascript syntax with our script type.

ko.applyBindings(viewModel);

We can then iterate through each name in the array by using a foreach loop. In this example I will leverage a ko comment binding to perform the foreach binding on our parameter of our ko.observablearray name. Inside the foreach binding I also use the basic data bind text with the $data value. This is similar to the `this` context with ko computed observables and subscribe when using the td data bind.

<table>
<tr>
<th>Name</th>
</tr>
<tbody>
<!-- ko foreach: names -->
<tr>
  <td><span data-bind="text: $data"></span></td>
</tr>
<!-- /ko -->
</tbody>
</table>

The data bind text does not have to go inside a comment. I actually commonly use the tbody data bind or a div data bind. Let me update the example text javascript with the new html foreach data.

<table>
<tr>
<th>Name</th>
</tr>
<tbody data-bind="foreach: names">
<tr>
  <td><span data-bind="text: $data"></span></td>
</tr>
</tbody>
</table>

TD data bind text HTML markup

In such data bind foreach, all observable array items are identified by HTML tags in loops. It is incredibly useful for importing tables. Foreach data can be integrated together with control flow bindings for our observable array with the td data bind text.

For what purpose do we use foreach binding in Ko?

The objective is: Foreach binding re-writes the markup in every column in an observable array and binds the corresponding markup to the array item. The software is particularly effective in rendering table and chart information.

What is data bind in HTML?

Data bind connects data from custom elements with properties and attributes from the local DOM (child DOM or targets). Host element, such as a div data bind, data is a property or subproperty represented in data paths or data that is generated using one or more paths in the text javascript array.