The foreach binding is one of the most commonly used features in Knockout.js — it lets you dynamically render lists of items, and keeps the DOM in sync as the list changes. Let’s break it down nice and easy foreach is a Knockout.js binding that:Loops through an observable arrayRepeats an HTML template for each item Automatically updates the DOM when the array changes (add/remove/update) Basic Example ViewModel: HTML: $data refers to the current item in the array. This will render: Using Objects in Arrays HTML: Advanced: Track Index & Parent Inside a foreach, Knockout gives you special variables: Variable Description $data The current item $index The index of the current item $parent The parent context (outside the loop) $root The root context (top-level VM) Dynamic Updates (Magic!) And in your HTML: The list will update automatically — no DOM work required! Summary Feature What it does foreach Loops through an observable array $data Current item $index Index of current item Dynamic updates Array changes auto-update the DOM Works with arrays of objects Great for tables, cards, lists, etc. Want an example using foreach to render a to-do list, shopping cart, or editable table? Just say the word and I’ll mock one up for you!

What is foreach? – MindStick

What is foreach?

The foreach binding is one of the most commonly used features in Knockout.js — it lets you dynamically render lists of items, and keeps the DOM in sync as the list changes.

Let’s break it down nice and easy

foreach is a Knockout.js binding that:
Loops through an observable array
Repeats an HTML template for each item

Automatically updates the DOM when the array changes (add/remove/update)

Basic Example

ViewModel:

function ViewModel() {
  this.fruits = ko.observableArray(["Apple", "Banana", "Cherry"]);
}
ko.applyBindings(new ViewModel());

HTML:

<ul data-bind="foreach: fruits">
  <li data-bind="text: $data"></li>
</ul>

$data refers to the current item in the array.

This will render:

Using Objects in Arrays

this.fruits = ko.observableArray([
  { name: "Apple", color: "Red" },
  { name: "Banana", color: "Yellow" }
]);

HTML:

<ul data-bind="foreach: fruits">
  <li>
    <strong data-bind="text: name"></strong> - 
    <span data-bind="text: color"></span>
  </li>
</ul>

Advanced: Track Index & Parent

Inside a foreach, Knockout gives you special variables:

Variable	Description
`$data`	The current item
`$index`	The index of the current item
`$parent`	The parent context (outside the loop)
`$root`	The root context (top-level VM)

<ul data-bind="foreach: fruits">
  <li>
    #<span data-bind="text: $index"></span> 
    <span data-bind="text: name"></span>
  </li>
</ul>

Dynamic Updates (Magic!)

this.addFruit = () => {
  this.fruits.push({ name: "Grapes", color: "Purple" });
};

this.removeLast = () => {
  this.fruits.pop();
};

And in your HTML:

<button data-bind="click: addFruit">Add Fruit</button>
<button data-bind="click: removeLast">Remove Last</button>

The list will update automatically — no DOM work required!

Summary

Feature	What it does
`foreach`	Loops through an observable array
`$data`	Current item
`$index`	Index of current item
Dynamic updates	Array changes auto-update the DOM
Works with arrays of objects	Great for tables, cards, lists, etc.

Want an example using foreach to render a to-do list, shopping cart, or editable table? Just say the word and I’ll mock one up for you!

<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>

interview

What is foreach?

Can you answer this question?

1 Answers

Basic Example

ViewModel:

HTML:

Using Objects in Arrays

HTML:

Advanced: Track Index & Parent

Dynamic Updates (Magic!)

Summary