Introduction to Knockout js foreach binding

Posted By : Rajan Rawat | 07-Apr-2017


The foreach link is copied as a significant part of each entry in the array and is linked with each copy of the corresponding matrix element item. This is especially useful for rendering lists or tables.

Assuming that the matrix is an observable matrix, each time you add, remove, or rearrange an entry in an array, you can effectively link the update user interface to match: insert or remove a tag or reorder multiple copies of an existing DOM element Does not affect any DOM element. This is much faster than regenerating the entire foreach every time you change the matrix.

Of course, you can arbitrarily nest any foreach any number of other control links to links, and like.

Exampe 1: how to iterate over an array

        <tr><th>First name</th><th>Last name</th></tr>
    <tbody data-bind="foreach: people">
            <td data-bind="text: firstName"></td>
            <td data-bind="text: lastName"></td>
<script type="text/javascript">
        people: [
            { firstName: 'Jackson', lastName: 'Anderson },
            { firstName: 'Aiden', lastName: 'Beckett' },
            { firstName: 'Liam', lastName: 'Brady' }


Example 2: Live example with add and remove options



<!DOCTYPE html>
    <script type='text/javascript' src='knockout-3.4.0.js'></script>
    <script type='text/javascript' src='work3.js'></script>
    <link rel="stylesheet" href="work3.css">
    <script src=""></script>

<div class='Example'> 
    <form action='/someServerSideHandler'>
        <p>You have asked for <span data-bind='text: gifts().length'>&nbsp;</span> gift(s)</p>
        <table data-bind='visible: gifts().length > 0'>
                    <th>Gift name</th>
                    <th />
            <tbody data-bind='foreach: gifts'>
                    <td><input class='required' data-bind='value: name, uniqueName: true' /></td>
                    <td><input class='required number' data-bind='value: price, uniqueName: true' /></td>
                    <td><a href='#' data-bind='click: $root.removeGift'>Delete</a></td>
        <button data-bind='click: addGift'>Add Gift</button>
        <button data-bind='enable: gifts().length > 0' type='submit'>Submit</button>
        $("form").validate({ submitHandler: });




body {
  font-family: arial;
  font-size: 14px;

.Example {
  padding: 1em;
  background-color: #EEEEDD;
  border: 1px solid #CCC;
  max-width: 655px;

.Example input {
  font-family: Arial;

.Example b {
  font-weight: bold;

.Example p {
  margin-top: 0.9em;
  margin-bottom: 0.9em;

.Example select[multiple] {
  width: 100%;
  height: 8em;

.Example h2 {
  margin-top: 0.4em;
  font-weight: bold;
  font-size: 1.2em;

.Example th {
  text-align: left;
  font-weight: bold;

.Example .price {
  text-align: right;
  padding-right: 2em;

.Example .grandTotal {
  border-top: 1px solid silver;
  padding-top: 0.5em;
  font-size: 1.2em;

.Example .grandTotal SPAN {
  font-weight: bold;

.Example table, .Example td, .Example th {
  padding: 0.2em;
  border-width: 0;
  margin: 0;
  vertical-align: top;

.Example td input, .Example td select {
  width: 8em;

.Example td.quantity input {
  width: 4em;

.Example td select {
  height: 1.8em;
  white-space: nowrap;

li {
  list-style-type: disc;
  margin-left: 20px;



var GiftModel = function(gifts) {
    var self = this; = ko.observableArray(gifts);
    self.addGift = function() {{
            name: "",
            price: ""
    self.removeGift = function(gift) {;
    }; = function(form) {
        alert("Could now transmit to server: " + ko.utils.stringifyJson(;
        // To actually transmit to server as a regular form post, write this: ko.utils.postJson($("form")[0],;
var viewModel = new GiftModel([
    { name: "Tall Hat", price: "39.95"},
    { name: "Long Cloak", price: "120.00"}




You have asked for 2 gift(s)

Gift name Price  



About Author

Author Image
Rajan Rawat

Rajan is a UI Developer, having good knowledge of HTML, CSS and javascript. His hobbies are internet surfing and watching sports.

Request for Proposal

Name is required

Comment is required

Sending message..