Javascript 递归handlebar.js模板。如何确定深度?
经过几个小时的搜索,我找不到我问题的正确答案。我有一个任意的树深度,我想用把手来显示。handlebar()中有一个很好的递归模板示例,但我无法获得树的深度@索引只告诉我每个元素的位置 我的部分模板:Javascript 递归handlebar.js模板。如何确定深度?,javascript,html,templates,recursion,handlebars.js,Javascript,Html,Templates,Recursion,Handlebars.js,经过几个小时的搜索,我找不到我问题的正确答案。我有一个任意的树深度,我想用把手来显示。handlebar()中有一个很好的递归模板示例,但我无法获得树的深度@索引只告诉我每个元素的位置 我的部分模板: <script id="teamspeak_channel_recursive" type="text/x-handlebars-template"> {{#each childChannel}} <tr class="viewer-table-row">
<script id="teamspeak_channel_recursive" type="text/x-handlebars-template">
{{#each childChannel}}
<tr class="viewer-table-row">
<td class="viewer-table-cell">
<span></span>
<span class="viewer-label">{{name}}</span>
<span></span>
</td>
</tr>
{{#if childChannel}}
{{> teamspeak_channel_recursive}}
{{/if}}
{{/each}}
</script>
我怀疑这是不能做到的使用把手部分。不过,递归帮助器可以做到这一点。我使用了您之前链接的小提琴作为概念证明的基础。您可以更新以使用自己的数据结构和HTML,但基本上如下所示:
var listHelperOutput = '';
function recursiveList(stuff, depth){
listHelperOutput += '<ul>';
stuff.forEach(function(el){
listHelperOutput += '<li>';
listHelperOutput += el.name + ' (depth ' + depth + ')';
if (el.items){
recursiveList(el.items, depth + 1);
}
listHelperOutput += '</li>';
});
listHelperOutput += '</ul>';
return new Handlebars.SafeString(listHelperOutput);
}
Handlebars.registerHelper('listHelper', recursiveList);
最后事情变得更复杂了,但你帮了我正确的方向。谢谢我将helper更改为块helper,以便在模板中选择html元素和输出。它仍然与模型紧密耦合。如果有人问我,我可以在这里张贴我完成的助手。
type": "channel",
"childChannel":
[
{
"type": "channel",
"childChannel":
[
{
"type": "channel",
"childChannel": null,
"childClient": null,
"name": "AFK Area"
}
],
"childClient": null,
"name": "WoW / SWToR / GuildWars2 hype"
},
{
"type": "channel",
"childChannel":
[
{
"type": "channel",
"childChannel": null,
"childClient": null,
"name": "Rumidler (AFK)"
}
],
"childClient": null,
"name": "FPS CS:GO Hype"
}
],
"childClient": null,
"name": "Hall of Games"
var listHelperOutput = '';
function recursiveList(stuff, depth){
listHelperOutput += '<ul>';
stuff.forEach(function(el){
listHelperOutput += '<li>';
listHelperOutput += el.name + ' (depth ' + depth + ')';
if (el.items){
recursiveList(el.items, depth + 1);
}
listHelperOutput += '</li>';
});
listHelperOutput += '</ul>';
return new Handlebars.SafeString(listHelperOutput);
}
Handlebars.registerHelper('listHelper', recursiveList);
{{listHelper items 1}}