Access outer loop property in nested 'foreach'

You can use $parent to access one scope level up. So, from your inner loop you can use parent to access the current item being looped on in your graduationDateRows


You can even loop through completely unrelated arrays using $parent and as aliasing in foreach binding.

Consider the following example:

var VM = function(){
    this.rows = ['one','two','three'];
    this.cols = [1,2,3,4,5];
}
ko.applyBindings(new VM());
<table border="1">
    <tr>
        <th></th>
        <!-- ko foreach: cols -->
        <th data-bind="text: $data"></th>
        <!-- /ko -->
    </tr>
    <!-- ko foreach: {data: rows, as: 'row'} -->
    <tr>
        <th data-bind="text:row"></th>
        <!-- ko foreach: {data: $parent.cols, as: 'col'} -->
        <td data-bind="text:row + '/' + col"></td>
        <!-- /ko -->
    </tr>
    <!-- /ko -->  
</table>  

Tags:

Knockout.Js