knockout multiple with bindings - html

Question

I have a page with several view models, and i need to dynamically build out a checkbox grid based on 2 of them.
This code populates the grid based on 1 view model:
<div id="fundingDetailLevels" class="scroll-adjust" data-bind="with: modelOne">
<table class="table table-hover">
<thead>
<tr data-bind="foreach: modelOneArray">
<!-- ko if: $index() == 0 -->
<th></th>
<!-- /ko -->
<th data-bind="text: name" ></th>
</tr>
</thead>
<tbody data-bind="foreach: modelOneArray2">
<tr data-bind="foreach: $parent.modelOneArray" >
<!-- ko if: $index() == 0 -->
<td data-bind="text: $parent.name"></td>
<!-- /ko -->
<td><input type="checkbox"></input></td>
</tr>
</tbody>
</table>
</div>
Which gives me a grid of:
header1 header2
row1 checkbox checkbox
row2 checkbox checkbox
but what I need is something closer to this:
<div id="fundingDetailLevels" class="scroll-adjust" data-bind="with: modelOne, modelTwo">
<table class="table table-hover">
<thead>
<tr data-bind="foreach: modelOneArray">
<!-- ko if: $index() == 0 -->
<th></th>
<!-- /ko -->
<th data-bind="text: name" ></th>
</tr>
</thead>
<tbody data-bind="foreach: modelTwoArray">
<tr data-bind="foreach: $parent.modelOneArray" >
<!-- ko if: $index() == 0 -->
<td data-bind="text: $parent.name"></td>
<!-- /ko -->
<td><input type="checkbox"></input></td>
</tr>
</tbody>
</table>
</div>
but that fails to find modelTwo

Answer 1

If you just make one view model then you can acheive what you are after. Try this:
var baseModel = function () {
var self = this;
self.modelOneArray = ko.observableArray([{ "name": "Jack" }, { "name": "Jimmy" }]);
self.modelTwoArray = ko.observableArray([{ "name": "Jack2" }, { "name": "Jimmy2" }]);
};
var myModel = myModel || {};
myModel = new baseModel();
ko.applyBindings(myModel);
and the html:
<div id="fundingDetailLevels" class="scroll-adjust">
<table class="table table-hover">
<thead>
<tr data-bind="foreach: modelOneArray">
<!-- ko if: $index()==0 -->
<th></th>
<!-- /ko -->
<th data-bind="text: name"></th>
</tr>
</thead>
<tbody data-bind="foreach: modelTwoArray">
<tr data-bind="foreach: myModel.modelOneArray">
<!-- ko if: $index()==0 -->
<td data-bind="text: myModel.modelOneArray().name"></td>
<!-- /ko -->
<td>
<input type="checkbox"></input>
</td>
</tr>
</tbody>
</table>
</div>