使用敲除绑定树视图结构答案

【问题标题】：Binding a tree view structure using knockout使用敲除绑定树视图结构
【发布时间】：2015-07-20 20:43:06
【问题描述】：

我正在使用循环绑定树视图结构。有什么方法可以在我不必使用循环的情况下使用淘汰赛来绑定它？

下面是我用来生成树视图的循环：

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>

【问题讨论】：

淘汰码在哪里？你试过什么？调试？您是否阅读过 KO 文档和/或学习过教程？

标签： knockout.js treeview structure using

【解决方案1】：

您可以在 Knockout 中使用 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>

【讨论】：