EJS模板：如何以最優雅和方便的方式

Question

生成一個HTML樹結構我有對象的這種嵌套數組：

var tree = [ 
    { 
     name: "item 1", 
     link: "#link-1", 
     children: [ 
      { 
       name: "item 1.1", 
       link: "#link-11", 
       children: [ 
        { 
         name: "item 1.1.1", 
         link: "#link-111", 
         children: [] 
        } 
       ] 
      }, 
      { 
       name: "item 1.2", 
       link: "#link-12", 
       children: [] 
      } 
     ] 
    }, 
    { 
     name: "item 2", 
     children: [] 
    } 
]; 

我想生成從這個模型的HTML ulli樹結構。

我發現的唯一解決方案就在下面（通過遞歸函數）。但我想避免字符串連接，因爲在我的真實情況下，我有更多的標記添加到每行li（這實在不方便）。

<% 
var markup = ''; 
function htmlTreeBuilder(items) { 
    if (items.length) { 
     markup += '<ul>'; 
    } 
    for (var i = 0; i < items.length; i++) { 
     markup += '<li>'; 
     markup += '<a href="' + items[i].link + '">' + items[i].name + '</a>'; 

     // Children 
     htmlTreeBuilder(items[i].children); 

     markup += '</li>'; 
    } 
    if (items.length) { 
     markup += '</ul>'; 
    } 
} 
htmlTreeBuilder(tree); 
%> 

<%- markup %> 

Answer 1

我發現了一個更好的方法，但它需要一個單獨的EJS文件。

在我main.ejs：

<%- partial('treeView', {items: tree}) %> 

在treeView.ejs：

<% if (items.length) { %> 
<ul> 
<% } %> 

    <% items.forEach(function(item){ %> 
    <li> 
     <a href="<%= item.link %>"><%= item.name %></a> 
     <%- partial('treeView', {items: item.children}) %> 
    </li> 
    <% }) %> 

<% if (items.length) { %> 
</ul> 
<% } %>