Как рекурсивно вызвать / запустить вложенный шаблон jQuery

Question

Хорошо, это немного похоже на начало для объектов JSON и шаблонов JQuery... Я хочу знать, как идти глубже. Проблема в том, что я ленивый и хочу, чтобы код сделал всю работу за меня....

Q:> Как вы называете шаблон jQuery рекурсивно.

Возьмите этот объект 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>

Я попытался установить тип второго шаблона "text/x-jquery-tmpl" и вызвать третий шаблон, но передаваемые данные, похоже, совпадают с родительским, который его вызывает.

Итак, всем существам с более высоким интеллектом и опытом я покажу, как быть ленивым и рекурсивно вызывать шаблон jQuery?

PS: извините, это не в jsFiddle. мне не нравятся мои теги сценариев.:(

Answer 1

Я думаю, вам просто нужно проверить, существуют ли дочерние элементы, и сделать рекурсивный вызов того же шаблона элемента с дочерними элементами, что и данные. Вы бы также условно добавили тег ul. Посмотрите это jsfiddle для того, что я имею в виду: 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>