假设我有这样的数据结构:
{ list: [ {
name: "1",
children: [{
name: "1.1",
children: []
},
{
name: "1.2",
children: [{
name: "1.2.1",
children: []
}
]
}
]
},
{
name: "2",
children: [{
name: "2.1",
children: [{
name: "2.1.1",
children: []
},
{
name: "2.1.2",
children: []
},
{
name: "2.1.3",
children: []
}
]
},
{
name: "2.2",
children: []
},
{
name: "2.3",
children: []
}
]
},
{
name: "3",
children: [{
name: "3.1",
children: []
}
]
}
]
}
我将如何使用 doT.js 创建一个模板,该模板将递归地遍历对象并构建嵌套列表?
使用递归函数直接在 JS 中构建 html 字符串非常简单:( http://jsfiddle.net/fergal_doyle/WN8hZ/5/ )
var html = "";
function buildList(a){
if (a.length == 0){return};
html += "<ul>";
for (var i = 0; i < a.length; i++)
{
html += "<li>" + a[i].name;
buildList(a[i].children);
html += "</li>";
}
html += "</ul>";
}
buildList(data.list);
$("#out").html(html);
但是使用 doT.js 这就是我所拥有的,然后我就难住了!( http://jsfiddle.net/fergal_doyle/BTZpu/4/ )
编辑: 我可以通过将一些 JS 与评估混合来做到这一点(http://jsfiddle.net/fergal_doyle/he8AN/)
{{ function buildList(a) { }}
{{?a.length}}
<ul>
{{~a :v}}
<li>
{{=v.name}}
{{ buildList(v.children); }}
</li>
{{~}}
</ul>
{{?}}
{{ } }}
{{ buildList( it.list ); }}
我试图使用部分来实现它。定义一个 ul 片段然后让该片段调用自己作为参数传入一个数组,但我得到一个“递归过多”错误。如果有任何方法可以使下面的工作,它比我认为的上面要整洁得多。( http://jsfiddle.net/fergal_doyle/qazGe/4/ )
{{##def.ul:a:
<ul>
{{~a :value}}
<li>{{=value.name}}{{#def.ul:value.children}}</li>
{{~}}
</ul>
#}}
{{#def.ul:it.list}}