Rekursive Lenkstange.js Vorlage. Wie bestimmt man die Tiefe?

Question

nach Stunden der Suche konnte ich nicht die richtige Antwort für meine Frage finden. Ich habe eine beliebige Baumtiefe, die ich mit dem Lenker anzeigen möchte. Es gibt ein gutes Geigenbeispiel für rekursives Templating im Lenker (https://jsfiddle.net/adamboduch/5yt6M/), aber ich kann die Tiefe des Baumes nicht bekommen. @index sagt mir nur die Position jedes Elements.

Mein Teil Vorlage:

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

ich auf Vorsatz möge den Namen auf dem deph über CSS-Marge nach links oder CSS-Klasse. Ich habe auch versucht, Parameter zu verwenden, aber es ist nicht erlaubt, eine Zahl zu berechnen oder überhaupt etwas zu tun. Auch ein Mathehelfer hat nicht geholfen. Javascript in der Vorlage ist, soweit ich weiß, verboten.

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

Kurz gesagt ich bin stecken und ich Tablecell keinen anderen Ausweg als verwenden, um eine geordnete Liste und stellen Sie den Anzeigemodus finden. Aber das ist nicht was ich will. Auch das Iterieren über den Kontext zum Hinzufügen der rekursiven Ebene ist keine gute Option.

Model (unvollständig):

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" 

Answer 1

Ich vermute, dies nicht Lenker Partials verwenden getan werden kann. Ein rekursiver Helfer würde jedoch den Trick tun. Ich habe die Fiddle verwendet, die Sie zuvor als Grundlage für einen minimalen Proof of Concept here verlinkt haben. Sie können aktualisieren Sie Ihre eigene Datenstruktur und HTML zu verwenden, aber es sieht im Grunde wie folgt:

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); 

in Ihrer Vorlage und nennen Sie es mit:

{{listHelper items 1}}