Recursive Handlebars.js Template. How to determine the depth?

Question

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"

score 0 · Accepted Answer · answered Apr 05 '16 at 17:40

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}}

in the end it was more complex but you helped me in the right direction. Thanks! I changed the helper to be a block helper so i can choose the html elements and output in the template. It's still very tightly coupled with the model. If someone asks i could post my finished helper in here. — Michael Z, Apr 07 '16 at 08:56

Recursive Handlebars.js Template. How to determine the depth?

1 Answers1