如何呈現任意深度的嵌套列表？

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> 

我能實現這個使用基因敲除如下：

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