Observable Array and Foreach Binding in Knockoutjs

Introduction

In one of my previous articles I explained how to use an Observable Property to create dynamic output with Knockoutjs in an ASP.NET Application.

This article explains how to use an "Observable Array" and "foreach binding" in Knockoutjs. As I said earlier, the Observable Property changes in the UI whenever an item is added or removed, so this Observable Array will also work like other Observables and will show the instant result of any changes made.

Step 1

First of all, you need to add Knockout to the ASP.NET Application; for that you can either download it from its home site or you can download my Zip file provided above and then fetch Knockout and use it in your application.

After downloading this file go to your application and right-click on it then select "Add Existing Item", then browse to the file where you stored it and add it.

Now this file will be added to the Solution Explorer of your application, now drag it to the Head Section of your application.

<head runat="server">
<title></title>
<script src="knockout-2.3.0.js"></script>
</head>

Step 2

Now we will work on the ViewModel of our application.

<script>
function x(car, features) {
var self = this;
self.name = car;
self.feature = ko.observable(features);
}
function y() {
var self = this;
self.carModel = [
{ carName: "I20", price: 600000 },
{ carName: "Verna", price: 1200000 },
{ carName: "Duster", price: 800000 }
];
self.cars = ko.observableArray([
new x("Anubhav", self.carModel[1]),
new x("Mohit", self.carModel[0])
]);
}
ko.applyBindings(new y());
</script>

In the function x() we create a class that will store the Buyer Name with the Car Selection made by him. Notice that the "feature" property is made observable.

After that a new function y() is created in which the Car Name and it's prices are declared under the carModel and after that in self.cars the selection made by the buyer is shown along with his name; self.cars is the Observable Array; that means that it will show the result instantly on the UI.

At the end, as always, the Bindings are applied to the y() that will be bound to the View of Knockout.

Step 3

Our View Model is now complete. We will now work on the View; that means the design part of the application.

<table>
<thead><tr>
<th>Buyer Name</th><th>Car Name</th><th>Price</th><th></th>
</tr></thead>
<tbody data-bind="foreach: cars">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: feature().carName"></td>
<td data-bind="text: feature().price"></td>
</tr>
</tbody>
</table>

Here I had used a foreach for the Observable Array.

After that in the first <td> I bound the Name of the Buyer and in the next two <td> the Car Name and it's prices are shown. As you can see, in the View Model I made self.feature as Observable so here it should be used as a function to inherit it's value.

My complete code is as follows:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication28.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="knockout-2.3.0.js"></script>
</head>
<body>
<form id="form1" runat="server">
<table>
<thead>
<tr>
<th>Buyer Name</th>
<th>Car Name</th>
<th>Price</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: cars">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: feature().carName"></td>
<td data-bind="text: feature().price"></td>
</tr>
</tbody>
</table>
<script>
function x(car, features) {
var self = this;
self.name = car;
self.feature = ko.observable(features);
}
function y() {
var self = this;
self.carModel = [
{ carName: "I20", price: 600000 },
{ carName: "Verna", price: 1200000 },
{ carName: "Duster", price: 800000 }
];
self.cars = ko.observableArray([
new x("Anubhav", self.carModel[1]),
new x("Mohit", self.carModel[0])
]);
}
ko.applyBindings(new y());
</script>
</form>
</body>
</html>

Output

After completing the code run your application, it will look something like this: