jQueryネストされたテンプレートを再帰的に呼び出す/実行する方法

Question

これはjsonオブジェクトとjqueryテンプレートの開始時と少し似ています...もっと深くする方法を知りたいです。あなたは再帰的にjQueryのテンプレートを呼び出すにはどうすればよい>：私は怠け者だとコードは私のために仕事をしたいという問題が....

Qです。

このJSONオブジェクトを取る：

var Links = 
[{"Name":"Home","NiceUrl":"/home/","Children":null}, 
{"Name":"MX-8","NiceUrl":"/mx-8/","Children":null}, 
{"Name":"Quiz","NiceUrl":"/quiz/","Children": 
     [{"Name":"Thank you","NiceUrl":"/quiz/thank-you/","Children": 
     [{"Name":"Can't get here","NiceUrl":"/URL/","Children":null}] 
    }] 
}]; 

私は簡単に次のテンプレートを使用して、 "クイズ" とその子 "ありがとう" を取得することができます。

も使用

<script id="itemTemplate" type="text/x-jquery-tmpl"> 
    <li><a href="${NiceUrl}">${Name}</a> 
     {{tmpl($data) "#childTemplate"}} 
    </li> 
</script> 
<script id="childTemplate" type="text/html"> 
    <ul>{{each Children}}<li><a href="${NiceUrl}">${Name}</a></li>{{/each}}</ul> 
</script> 

はhtmlですそれを置き換える呼び出し：

<script type="text/javascript"> 
    $("#itemTemplate").tmpl(Links).appendTo("#SiteMapHolder"); 
</script> 
<ul id="SiteMapHolder"> 
    <%--jQuery Template will replace this empty space--%> 
</ul> 

私は2番目のテンプレートのタイプを "text/x-jquery-tmpl"に設定して3番目のテンプレートを呼び出そうとしましたが、渡されるデータはそれを呼び出す親と同じようです。

そうすれば、より高い知性と経験を持つすべての人に、私はを怠け者にし、jQueryテンプレートを再帰的に呼び出すことができますか？

PS：申し訳ありませんが、これはjsFiddleにありません。私のスクリプトタグが好きではありません。 :(

Answer 1

子供が存在するかどうかをチェックし、子どもをデータとして持つ同じアイテムテンプレートを再帰呼び出しする必要があると思うのですが、条件付きでulタグを追加することもできます。 http://jsfiddle.net/bernardchen1/SK2c6/

私はこのようなルックスを使用することをテンプレート自体：。？

<script id="itemTemplate" type="text/x-jquery-tmpl"> 
<li><a href="${NiceUrl}">${Name}</a> 
    {{if Children}} 
    <ul> 
    {{tmpl(Children) "#itemTemplate"}} 
    </ul> 
    {{/if}} 
</li>