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

您可以使用Knockout中的named templates递归绑定树状结构。 E.g：

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>

使用挖空绑定树视图结构

1 个答案: