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