递归Handlebars.js模板如何确定深度？
递归Handlebars.js模板如何确定深度？
提问于 2016-04-05 13:12:30
经过几个小时的搜索，我找不到正确的答案。我有一个任意的树的深度，我想显示与把。有一个用于在车把中递归模板( https://jsfiddle.net/adamboduch/5yt6M/ )的很好的小提琴示例，但我无法得到树的深度。@index只告诉我每个元素的位置。
我的部分模板：
<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>我想要通过css空白左或css类基于部门名称。我也尝试使用参数，但它不允许计算一个数字或做任何数学。另外，一个数学助手也帮不上忙。据我所知，模板中的Javascript是被禁止的。
<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 deph=({{../deph}}+1) }} <- dosen't work only statc values or the context itself is working
{{/if}}
{{/each}}
</script>总之，我被困住了，除了使用有序列表并将显示模式设置为桌布之外，我找不到出路。但这不是我想要的。此外，迭代上下文以添加之前的递归级别也不是一个不错的选择。
模式(不完整)：
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"回答 1
Stack Overflow用户
回答已采纳
发布于 2016-04-05 17:40:16
我怀疑这不能用车把，部分。不过，递归帮助器可以完成这一任务。我使用了前面链接的Fiddle作为概念这里的最小证明的基础。您可以使用自己的数据结构和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);并在模板中调用它：
{{listHelper items 1}}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36427417
复制相关文章
相似问题
腾讯云开发者
