Reputation: 1042
Hello I am new to knockout and I am stuck with a situation where I am creating a table with nested foreach but inner loop works on condition matched with outer loop but it is working when above object is plain array like given.
viewModel.Subject=ko.observableArray(['Science','Math']);
below given observable is not working to bind child elements
viewModel.SubjectClass=ko.observableArray([{'Class':'8','Subject':'Science'},{'Class':'7','Subject':'Math'},{'Class':'8','Subject':'Science'},{'Class':'6','Subject':'Math'}]);
var viewModel={};
viewModel.Subject=ko.observableArray(['Science','Math']);
viewModel.SubjectClass=ko.observableArray([{'Class':'8','Subject':'Science'},{'Class':'7','Subject':'Math'},{'Class':'8','Subject':'Science'},{'Class':'6','Subject':'Math'}]);
viewModel.Students=ko.observableArray([
{'StId':1,'StName':'John','Class':'8','Subject':'Science'},
{'StId':2,'StName':'Martha','Class':'7','Subject':'Math'},
{'StId':3,'StName':'George','Class':'6','Subject':'Math'},
{'StId':4,'StName':'Martin','Class':'8','Subject':'Science'},
{'StId':5,'StName':'Donny','Class':'7','Subject':'Math'},
{'StId':6,'StName':'Kit','Class':'6','Subject':'Science'},
{'StId':7,'StName':'Albert','Class':'8','Subject':'Math'}
]);
ko.applyBindings(viewModel);
body{
background-color: white;
}
.subjectHeader{
font-weight: bolder;
font-size: 14px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table class='table table-condensed table-bordered'>
<thead>
<th>St Id</th>
<th>St Name</th>
<th>Class</th>
<th>Subject</th>
</thead>
<!--<tbody data-bind='foreach: viewModel.SubjectClass'>-->
<tbody data-bind='foreach: viewModel.Subject'>
<tr><td colspan="4">
<p class="subjectHeader">
<!--<span data-bind="text:Class"></span>
<span data-bind='text:Subject' style="margin-left: 40%;"></span>-->
<span data-bind='text:$data' style="margin-left: 40%;"></span>
</p>
<table class='table table-condensed table-bordered'>
<tbody data-bind="foreach:viewModel.Students">
<!--<tr data-bind="if: Subject == $parentContext.Subject">-->
<tr data-bind="if: Subject == $parentContext.$data">
<td data-bind='text:StId'></td>
<td data-bind='text:StName'></td>
<td data-bind='text:Subject'></td>
<td data-bind='text:Class'></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I understand this issue is because of $parentContext as it is not having reference of observableArray that's why 'Subject' array is working but not SubjectClass for binding child loop. Part which is not working I have commented.
Upvotes: 1
Views: 57
Reputation: 6372
You simply need to use $parent
, which holds the actual data, instead of $parentContext
, which is a reference to the binding context.
var viewModel={};
viewModel.Subject=ko.observableArray(['Science','Math']);
viewModel.SubjectClass=ko.observableArray([{'Class':'8','Subject':'Science'},{'Class':'7','Subject':'Math'},{'Class':'8','Subject':'Science'},{'Class':'6','Subject':'Math'}]);
viewModel.Students=ko.observableArray([
{'StId':1,'StName':'John','Class':'8','Subject':'Science'},
{'StId':2,'StName':'Martha','Class':'7','Subject':'Math'},
{'StId':3,'StName':'George','Class':'6','Subject':'Math'},
{'StId':4,'StName':'Martin','Class':'8','Subject':'Science'},
{'StId':5,'StName':'Donny','Class':'7','Subject':'Math'},
{'StId':6,'StName':'Kit','Class':'6','Subject':'Science'},
{'StId':7,'StName':'Albert','Class':'8','Subject':'Math'}
]);
ko.applyBindings(viewModel);
body{
background-color: white;
}
.subjectHeader{
font-weight: bolder;
font-size: 14px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table class='table table-condensed table-bordered'>
<thead>
<th>St Id</th>
<th>St Name</th>
<th>Class</th>
<th>Subject</th>
</thead>
<tbody data-bind='foreach: viewModel.SubjectClass'>
<!--<tbody data-bind='foreach: viewModel.Subject'>-->
<tr><td colspan="4">
<p class="subjectHeader">
<span data-bind="text:Class"></span>
<span data-bind='text:Subject' style="margin-left: 40%;"></span>
<!--<span data-bind='text:$data' style="margin-left: 40%;"></span>-->
</p>
<table class='table table-condensed table-bordered'>
<tbody data-bind="foreach:viewModel.Students">
<tr data-bind="if: Subject == $parent.Subject">
<!--<tr data-bind="if: Subject == $parentContext.$data">-->
<td data-bind='text:StId'></td>
<td data-bind='text:StName'></td>
<td data-bind='text:Subject'></td>
<td data-bind='text:Class'></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Upvotes: 1