Preparation Code Preparation HTML (this will be inserted in the <body> of a valid HTML5 document in standards mode) <script src ="http://knockoutjs.com/downloads/knockout-3.1.0.js" > </script >
<table id ="testCase1" data-bind ="foreach: items1" >
<tr data-bind ="foreach: columns" >
<td data-bind ="text: $data" />
</tr >
</table >
<table id ="testCase2" data-bind ="foreach: items2" >
<tr >
<td data-bind ="text: columns[0]" />
<td data-bind ="text: columns[1]" />
<td data-bind ="text: columns[2]" />
<td data-bind ="text: columns[3]" />
<td data-bind ="text: columns[4]" />
<td data-bind ="text: columns[5]" />
<td data-bind ="text: columns[6]" />
<td data-bind ="text: columns[7]" />
<td data-bind ="text: columns[8]" />
<td data-bind ="text: columns[9]" />
</tr >
</table >
<script id ="templateTestCase3Main" type ="text/html" >
<tr data-bind ="template:{name:'templateTestCase3Child',foreach: columns}" >
</tr >
</script >
<script id ="templateTestCase3Child" type ="text/html" >
<td data-bind ="text: $data" />
</script >
<table id ="testCase3" data-bind ="template:{name:'templateTestCase3Main',foreach: items3}" >
</table >
<script id ="templateTestCase4Main" type ="text/html" >
<tr >
<td data-bind ="text: columns[0]" />
<td data-bind ="text: columns[1]" />
<td data-bind ="text: columns[2]" />
<td data-bind ="text: columns[3]" />
<td data-bind ="text: columns[4]" />
<td data-bind ="text: columns[5]" />
<td data-bind ="text: columns[6]" />
<td data-bind ="text: columns[7]" />
<td data-bind ="text: columns[8]" />
<td data-bind ="text: columns[9]" />
</tr >
</script >
<table id ="testCase4" data-bind ="template: {name:'templateTestCase4Main',foreach: items4}" >
</table >
<script >
var model = {
items1 : ko.observable ([]),
items2 : ko.observable ([]),
items3 : ko.observable ([]),
items4 : ko.observable ([])
};
var items = [];
for (var i = 0 ; i < 10 ; i++) {
var item = { columns : [] };
for (var j = 0 ; j < 10 ; j++) {
item.columns .push (i.toString () + ":" + j.toString ());
}
items.push (item);
}
ko.applyBindings (model);
</script >
Setup JS
Teardown JS