模板的Durandal递归组成 [英] Durandal recursive composing of template

问题描述

我正在尝试以递归方式在应用程序中编写模板.我有一个多维数组，试图将其整理成表格行.我可以使第一个关卡工作得很好，但不能使后续关卡正常渲染.

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.

我知道Durandal要求视图具有单个根元素.我正在使用虚拟容器来编写模板.

I know that Durandal requires the view to have a single root element. I am using a virtual container to compose my template.

这是我的父视图

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

这是我的模板

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

谢谢.

推荐答案

这就是我最终得到的结果:

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

基本上，我需要2个视图/模型.这是一个根，它只是组成了更多的自身.

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.

这篇关于模板的Durandal递归组成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！