Question

我试图递归地在我的应用程序中编写一个模板。我有一个多维数组，我试图压缩到表行。我可以让第一级工作得很好，但我不能让后续级别正常渲染。

我知道Durandal要求视图只有一个根元素。我正在使用虚拟容器来构建我的模板。

这是我的父视图

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

一切都很好，直到我下一个元素，然后构图仍然有效，但我没有得到最后的元素。

有没有人可以解决这个问题？

谢谢。

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>

我认为这对我有用的原因是因为它在每一行都生成了新的根。

Durandal递归组合模板

2 个答案: