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