- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我有这个嵌套的对象数组:
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/
引用: 我想弄清楚“Handy Time Stamp”在时间包中的用途。 我可以使用其他常量(例如 RFC)很好地解析日期 t, _ := time.Parse(time.RFC822, "02 Ja
所以 Laravel 的 $appends 是一个非常好的特性。我有一个 products 表,我将 vendor、images 和其他添加到 $appends 数组,所以我的代码如下所示: 类产品扩
我在玩弄 LG LG P990 optimus 速度,发现使用多线程我根本无法获得任何加速。 我使用以下代码来测量某些计算所需的时间。 公共(public)类 TestThreads 扩展线程{ pu
我有这个嵌套的对象数组: var tree = [ { name: "item 1", link: "#link-1", children: [
我是一名优秀的程序员,十分优秀!