Как рекурсивно вызвать / запустить вложенный шаблон jQuery
Хорошо, это немного похоже на начало для объектов 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. мне не нравятся мои теги сценариев.:(
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>