javascript - 如何渲染任意深度的嵌套列表？

Question

假设我有以下 JSON 数组:

tree = [{
    name: "A",
    children: [{
        name: "AA",
        children: []
    }, {
        name: "AB",
        children: []
    }]
}, {
    name: "B",
    children: [{
        name: "BA",
        children: []
    }, {
        name: "BB",
        children: []
    }]
}]

此外，假设我想构建以下 HTML:

<ul>
    <li>
        <label>A</label>
        <ul>
            <li>
                <label>AA</label>
                <ul></ul>
            </li>
            <li>
                <label>AB</label>
                <ul></ul>
            </li>
        </ul>
    </li>
    <li>
        <label>B</label>
        <ul>
            <li>
                <label>BA</label>
                <ul></ul>
            </li>
            <li>
                <label>BB</label>
                <ul></ul>
            </li>
        </ul>
    </li>
</ul>

我可以使用 Knockout 来实现此目的，如下所示:

<ul data-bind="foreach: tree">
    <li>
        <label data-bind="text: name"></label>
        <ul data-bind="foreach: children">
            <li>
                <label data-bind="text: name"></label>
                <ul></ul>
            </li>
        </ul>
    </li>
</ul>

但是，这不适用于任意深度的嵌套列表。我能做什么？

Answer 1

使用递归 template ，例如像这样:

var tree = {
  subItems: [
    { 
      name: "A", 
      subItems: [ { name:"AA", subItems: [] }, { name:"AB", subItems: [] }, { name:"AC", subItems: [] } ] 
    },
    { 
      name: "B", 
      subItems: [ { name:"BA", subItems: [] }, { name:"BB", subItems: [{name:"BB1 (etc)", subItems: []}] } ] 
    }
  ]
};

ko.applyBindings(tree);

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

<script type="text/html" id="myTemplate">
    <ul data-bind="foreach: $data">
        <li>
            <label data-bind="text: name"></label>
            <div data-bind="template: { name: 'myTemplate', data: subItems }"></div>
        </li>
    </ul>
</script>

<div data-bind="template: { name: 'myTemplate', data: $root.subItems }"></div>