我有这个嵌套的对象数组:
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 ul
li
树结构。
我找到的唯一解决方案就在下面(通过递归函数)。但我想避免字符串连接,因为在我的实际情况下,我要在 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 %>
最佳答案
我找到了一个更好的方法,但它需要一个单独的 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>
<% } %>
关于javascript - EJS 模板 : How to generate an HTML tree structure in the most elegant and handy way,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21805577/