Özyinelemeli Handlebars.js Şablonu. Derinliği nasıl belirleyebilirim?

Question

Aramadan sonra sorularım için doğru cevabı bulamadım. Gidonlarla görüntülemek istediğim keyfi bir ağaç derinliğim var. Gidonlarda (https://jsfiddle.net/adamboduch/5yt6M/) tekrarlayan şablonlama için iyi bir keman örneği var ama ağacın sapını alamıyorum. @ index sadece her bir öğenin konumunu söyler.

Benim Kısmi Şablon:

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

ben niyet için sol css marjı veya css sınıfı aracılığıyla deph dayalı isim istiyorum. Ayrıca parametreler kullanmayı denedim, ancak bir sayı hesaplamak veya herhangi bir matematik yapmak için izin verilmiyor. Ayrıca bir matematik yardımcısı da yardımcı olmadı. Şablondaki Javascript, bildiğim kadarıyla yasaklandı. Kısacası

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

sıkıştım ve sıralı bir listesini kullanmak ve TableCell için ekran modunu ayarlamak dışındaki çıkış yolu bulmuyorum. Ama istediğim bu değil. Ayrıca, yinelemeli düzey eklemek için bağlam üzerinde yinelemek de güzel bir seçenek değildir.

Modeli (tamamlanmamış):

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

Bu Gidon Partials kullanılarak yapılamaz şüpheli. Yinelemeli bir yardımcı olsa da hile yapardı. Daha önce bağlandığınız Fiddle'ı, here konseptinin asgari bir kanıtının temeli olarak kullandım. Kendi veri yapısını ve HTML kullanmak güncelleyebilir ancak temelde şöyle görünür:

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

Ve şablonunda ile çağrı: daha karmaşık oldu sonunda

{{listHelper items 1}}