Durandal recursive patterning

Question

I am trying to create a template in my application recursively. I have a multidimensional array that I'm trying to flatten into table rows. I can make the first level work fine, but I cannot get the next levels for rendering.

I know that Durandal requires a view to have one root element. I use a virtual container to create my template.

Here is my parental look

<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 add an element, and then the composition still works, but I do not get the last element.

Does anyone have a workaround for this?

Thank.

Answer 1

, , . , , .

<!--ko foreach: subItems-->
    <!--ko compose: { model:'viewmodels/documentquery/querytemplate', activationData: { data: $data }} -->
    <!--/ko-->
<!--/ko-->

, querytemplate.js

define([], function () {
    var ctor = function () {};

    ctor.prototype.activate = function (data) {
        var self = this;
        self.subItem = self.settings.data;
    }

    return ctor;
});

, with subitem, . , , $data. .

Answer 2

:

<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-->

, 2 /. , .

:

<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>

, , , , .