使用敲除來綁定樹視圖結構

Question

我使用循環來綁定樹視圖結構。有沒有什麼辦法可以用knockout來綁定這個我不用循環的地方？

下面是我使用以產生樹視圖中的循環：

var items = viewModel.TreeView(); 
for (var i = 0; i < items.length; i++) { 

    if (items[i].ParentMenuID == 0) { 
     var html = '<li menuId="' + items[i].MenuID + '"><span class="arrow">&nbsp;</span>'; 
     html += '<span><a href="#" name="basenode" href="javascript:void(0);">' + items[i].MenuName + '</a></span></li>'; 
     $("#ulTree").append(html); 
    } 
    else { 
     var html = '<ul><li menuId="' + items[i].MenuID + '"><span class="arrow">&nbsp;</span>'; 
     html += '<span><a href="#" name="endnode" href="javascript:void(0);">' + items[i].MenuName + '</a></span></li></ul>'; 
     $("#ulTree li[menuId='" + items[i].ParentMenuID + "']").append(html); 
     $($("#ulTree li[menuId='" + items[i].ParentMenuID + "']").find(".arrow")[0]).addClass("collapse collapsible"); 
    } 
} 

上面的代碼的輸出下面是：

<li menuid=1> 
<span class="arrow collapse collapsible">&nbsp;</span> 
<span><a href="#" name="basenode">PARENT</a></span> 
<ul style="display: none;"> 
<li menuid="222"> 
<span class="arrow collapse collapsible">&nbsp;</span> 
<span><a href="#" name="endnode">NODE</a></span> 
<ul style="display: none;"> 
<li menuid="223"> 
<span class="arrow">&nbsp;</span> 
<span><a href="#" name="endnode">1121</a></span> 
</li> 
</ul> 
</li> 
</ul> 
</li> 

Answer 1

可以遞歸地結合使用named templates樹狀結構擊倒。例如： -

var viewModel = { 
 
    TreeView: ko.observable({ 
 
    childNodes: [ 
 
     { 
 
     id: 1, 
 
     childNodes: [ {id: 2, childNodes: [{id: 3, childNodes: [] }] } ] 
 
     }, 
 
     { 
 
     id: 4, 
 
     childNodes: [ {id: 5, childNodes: [] } ] 
 
     } 
 
    ] 
 
    }) 
 
}; 
 

 
ko.applyBindings(new viewModel.TreeView());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<script type="text/html" id="node"> 
 
<li menuid="data bind with attr binding"> 
 
<span class="arrow collapse collapsible">&nbsp;</span> 
 
<span><a href="#" name="endnode">NODE</a></span> 
 
<ul data-bind="template: { name: 'node', foreach: childNodes }"> 
 
</ul> 
 
</li> 
 
</script> 
 

 
<ul data-bind="template: { name: 'node', foreach: childNodes }"></ul>