after hours of searching i couldn't find the correct answer for my question. I have an arbitrary tree depth I'd like to display with handlebars. There is a good fiddle example for recursive templating in handlebars ( https://jsfiddle.net/adamboduch/5yt6M/ ) but i can't get the deph of the tree. @index only tells me the position of the each element.
My Partial Template:
<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>
I want to intent the name based on the deph via css margin left or css class. I also tried using parameters but it's not allowed to compute a number or to do any math at all. Also a math helper didn't helped either. Javascript inside the template is, as far as I know, prohibited.
<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>
In short I'm stuck and I don't find a way out other than use an ordered list and set the display mode to tablecell. But that is not what I want. Also iterating over the context to add the recursive level before is not a nice option either.
Model (incomplete):
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"
I suspect this cannot be done using Handlebars Partials. A recursive Helper would do the trick though. I've used the Fiddle you linked earlier as the basis for a minimal proof of concept here . You can update to use your own data structure and HTML but it basically looks like this:
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);
And in your template call it with:
{{listHelper items 1}}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.