Question

在这个例子中，我有一个嵌套模板来显示树状视图，如缩进输出，但叶子节点上呈现的HTML不是我所期望的。如何让叶子节点呈现预期的html并且不包含子容器div？

如果我将if绑定放在模板绑定之外，我会收到一个javascript错误：

Uncaught Error: Multiple bindings (if and template) are trying to control descendant bindings of the same element. You cannot use these bindings together on the same element.

注意：使用if绑定注释确实可以删除不需要的元素，但是生成的html充满了注释，我宁愿保持干净，因为我可能有数百个叶子节点

我尝试过使用2个模板，一个用于容器，另一个没有，并且为名称添加条件，但模板始终呈现nodeTempl：data-bind="template: { name: (children().length > 0) ? 'nodeTempl' : 'leafTempl', foreach: children }"

我想我真的想根据当前正在处理的孩子的状态来应用不同的模板。

叶子节点正在像这样呈现

<div>
    <div data-bind="text: name">Node 1-1-1</div>            
    <div class="indent-1" data-bind="template: {if: children().length &gt; 0,  name: 'nodeTempl', foreach: children }"></div>
</div>

但是我希望它像这样呈现：

<div>
    <div data-bind="text: name">Node 1-1-1</div>            
</div>

以下是设置：

HTML

<style type="text/css">
    .indent-1 {
        margin-left: 20px;
    }
</style>

<script id="nodeTempl" type="text/html">
    <div>
        <div data-bind="text: name"></div>            
        <div class="indent-1" data-bind="template: {if: children().length > 0,  name: 'nodeTempl', foreach: children }"></div>
    </div>
</script>

<div data-bind="template: { name: 'nodeTempl', foreach: children }"></div>

脚本

var node = function (config) {
    var self = this;
    self.name = ko.observable(config.name);
    self.children = ko.observableArray([]);
    if ($.isArray(config.children)) {
        for (var i = 0; i < config.children.length; i++) {
            self.children.push(new node(config.children[i]));
        }
    }
};

ko.applyBindings(new node(
    {
        name: 'root',
        children: [
            { name: 'Node1', children: [{name: 'Node 1-1', children: [{name: 'Node 1-1-1'}]},{name: 'Node 1-2'}]},
            {name: 'Node2',children: [{name: 'Node 2-1'},{name: 'Node 2-2'}]},
            {name: 'Node3'},
        ]
    }
    ));

输出

<div data-bind="template: { name: 'nodeTempl', foreach: children }">
    <div>
        <div data-bind="text: name">Node1</div>            
        <div class="indent-1" data-bind="template: {if: children().length &gt; 0,  name: 'nodeTempl', foreach: children }">
    <div>
        <div data-bind="text: name">Node 1-1</div>            
        <div class="indent-1" data-bind="template: {if: children().length &gt; 0,  name: 'nodeTempl', foreach: children }">
    <div>
        <div data-bind="text: name">Node 1-1-1</div>            
        <div class="indent-1" data-bind="template: {if: children().length &gt; 0,  name: 'nodeTempl', foreach: children }"></div>
    </div>
</div>
    </div>

    <div>
        <div data-bind="text: name">Node 1-2</div>            
        <div class="indent-1" data-bind="template: {if: children().length &gt; 0,  name: 'nodeTempl', foreach: children }"></div>
    </div>
</div>
    </div>

    <div>
        <div data-bind="text: name">Node2</div>            
        <div class="indent-1" data-bind="template: {if: children().length &gt; 0,  name: 'nodeTempl', foreach: children }">
    <div>
        <div data-bind="text: name">Node 2-1</div>            
        <div class="indent-1" data-bind="template: {if: children().length &gt; 0,  name: 'nodeTempl', foreach: children }"></div>
    </div>

    <div>
        <div data-bind="text: name">Node 2-2</div>            
        <div class="indent-1" data-bind="template: {if: children().length &gt; 0,  name: 'nodeTempl', foreach: children }"></div>
    </div>
</div>
    </div>

    <div>
        <div data-bind="text: name">Node3</div>            
        <div class="indent-1" data-bind="template: {if: children().length &gt; 0,  name: 'nodeTempl', foreach: children }"></div>
    </div>
</div>

Answer 1

您走在正确的轨道上，建议您需要两个模板。模板name参数可以是返回数组中每个项的模板名称的函数。

您可以创建如下函数：

function nodeTemplate(node) {
    return node.children().length > 0 ? 'nodeTempl' : 'nodeLeafTempl';
}

并将您的观点改为：

<script id="nodeTempl" type="text/html">
    <div>
        <div data-bind="text: name"></div>            
        <div class="indent-1" data-bind="template: {name: nodeTemplate, foreach: children }"></div>
    </div>
</script>

<script id="nodeLeafTempl" type="text/html">
    <div>
        <div data-bind="text: name"></div>            
    </div>
</script>

<div data-bind="template: { name: nodeTemplate, foreach: children }"></div>

Knockout递归模板选择性绑定

1 个答案: