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

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

2 голосов
/ 22 июня 2011

Хорошо, это немного похоже на создание объектов 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 Ответ

3 голосов
/ 22 июня 2011

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

...