假设我有一个数据结构是这样的:递归与doT.js
{ 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将递归经过对象,并建立嵌套列表模板?
直接与递归函数构建HTML字符串中的JS是直截了当不够:(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}}