knockout.js - knockout 递归模板选择性绑定(bind)

Question

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

如果我将 if 绑定(bind)放在模板绑定(bind)之外，我会收到一个 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 绑定(bind)注释 <!-- ko if: children().length > 0 -->确实可以删除不需要的元素，但是生成的 html 充满了评论，我更愿意保持它干净，因为我可能有数百个叶节点。

我尝试使用 2 个模板，一个带容器，一个不带容器，并为名称设置条件，但模板始终呈现 nodeTempl:data-bind="template: { name: (children().length > 0) ? 'nodeTempl' : 'leafTempl', foreach: children }"
我想我真的想根据当前正在处理的 child 的状态应用不同的模板。

叶节点是这样渲染的

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