Knockout.js 淘汰递归模板选择绑定

在本例中，我使用了一个嵌套模板来显示树状视图，就像缩进的输出一样，但叶节点上呈现的HTML并不是我所期望的。如何使叶节点呈现预期的html而不包含子容器div

如果将If绑定放在模板绑定之外，则会出现javascript错误：

Uncaught错误：多个绑定（if和template）正试图控制同一元素的后代绑定。不能在同一元素上同时使用这些绑定。

注意：使用if绑定注释

确实可以删除不需要的元素，但是生成的html充满了注释，我更愿意保持它的整洁，因为我可能会有数百个叶节点

我尝试使用了两个模板，一个带容器，一个不带容器，并为名称添加了一个条件，但该模板始终呈现nodeTempl:

data bind=“template:{name:（children（）.length>0）？'nodeTempl'：'leaftTempl'，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>

节点1-1-1

但我希望它呈现如下：

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

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

节点1-1-1

以下是设置：

HTML

.缩进-1{
左边距：20px；
}

剧本

var节点=函数（配置）{
var self=这个；
self.name=ko.observable（config.name）；
self.children=ko.observearray（[]）；
if（$.isArray（config.children））{
对于（var i=0；i

输出

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

节点1
节点1-1
节点1-1-1
节点1-2
节点2
节点2-1
节点2-2
节点3

您的思路正确，建议您需要两个模板。template

name

参数可以是一个函数，用于返回数组中每个项的模板名称

您可以创建如下函数：

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

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>