再帰的なHandlebars.jsテンプレート。どのように深さを決定するのですか？

Question

検索の時間がたっても、私の質問に正しい答えが見つかりませんでした。私はハンドルバーで表示したい任意のツリーの深さを持っています。ハンドルバー（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クラスを経由してdephに基づいて名前をしたいです。私もパラメータを使用しようとしましたが、数値を計算したり、数学をすることはできません。また、数学の助手も助けなかった。テンプレート内の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" 

Answer 1

私は、これはハンドルバーパーシャルを使用して行うことができないと思います。再帰的なヘルパーはトリックを行います。私は、最小限の証明であるhereの基礎として以前にリンクしたフィドルを使用しました。独自のデータ構造や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}}