Durandal recursive composing of template - knockout-2.0

Question

I am trying to compose a template in my application recursively. I have a multi-dimensional array that I am trying to flatten out into table rows. I can get the first level to work great, but I cannot get subsequent levels to render properly.
I know that Durandal requires the view to have a single root element. I am using a virtual container to compose my template.
Here is my parent view
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th></th>
<th>Condition</th>
<th>Index Field</th>
<th>Operator</th>
<th>Value</th>
</tr>
</thead>
<tbody data-bind="foreach:queryItems">
<!--ko compose: {view:'documentquery/querytemplate.html', model: $data, preserveContext: true } --><!--/ko-->
</tbody>
</table>
Here is my template
<tr>
<td data-bind="text: $data.subItems().length"></td>
<td style="width: 10%;"><button type="button" class="btn btn-sm btn-info" data-bind="click: $root.onAddSubconditionClick">Add sub-condition</button></td>
<td data-bind="text: $data.condition"></td>
<td data-bind="text: $data.indexField"></td>
<td data-bind="text: $data.operator"></td>
<td data-bind="text: $data.value"></td>
</tr>
<!--ko foreach: $data.subItems-->
<!--ko compose: {view:'documentquery/querytemplate.html', model: $data, preserveContext: true } --><!--/ko-->
<!--/ko-->
Everything is fine until I next an element and then the composition still works but I don't get the final element.
Does anyone have a work-around for this one?
Thank you.

Answer 1

I would use a view and view model pair instead of trying to debug what the state is at that point. It's not to say you can't do it without it, but it's just easier.
<!--ko foreach: subItems-->
<!--ko compose: { model:'viewmodels/documentquery/querytemplate', activationData: { data: $data }} -->
<!--/ko-->
<!--/ko-->
And then give your query template a view model called querytemplate.js
define([], function () {
var ctor = function () {};
ctor.prototype.activate = function (data) {
var self = this;
self.subItem = self.settings.data;
}
return ctor;
});
You will need to update your template to bind it using the with binding to subitem but that should be pretty straight forward. Also when you are referencing a property in the current context you don't need to use $data.whatever you can just use whatever.

Answer 2

This is what I ended up with:
<div class="panel-heading" style="font-size: 12px; font-weight: 700; padding: 2px 0;">
<!--ko compose: {view: 'widgets/querybuilder/predicate-row/predicate-row', model: 'widgets/querybuilder/predicate-row/predicate-row', activationData: {rowIndex: -1, predicate: predicate,settings: {root: isRoot()}}}-->
<!--/ko-->
</div>
<!--ko foreach: predicate().conditions-->
<!--ko if: $data.name == 'condition'-->
<!--ko compose: {view: 'widgets/querybuilder/condition-row/condition-row', model: 'widgets/querybuilder/condition-row/condition-row', activationData: {rowIndex: $index, condition: $data, indexes: $parent.indexes, root: false}}--><!--/ko-->
<!--/ko-->
<!--ko if: $data.name == 'predicate'-->
<!--ko compose: {model: 'widgets/querybuilder/predicate/predicate', view: 'widgets/querybuilder/predicate/predicate', activationData: {rowIndex: $index, predicate: $data, indexes: $parent.indexes, root: false } }--><!--/ko-->
<!--/ko-->
<!--/ko-->
Basically, I needed 2 view/models. This one is the root and it just composes more of itself.
The root is composed like this from the parent view:
<div id="query-builder-root">
<!--ko compose: {model: 'widgets/querybuilder/predicate/predicate', view: 'widgets/querybuilder/predicate/predicate', activationData: {predicate: predicate(), indexes: indexes, root: true } }--><!--/ko-->
</div>
I think the reason this works for me is because it is generating a new root on each row.