如何递归调用/运行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}]
     }]
 }];

我可以使用以下模板轻松获得"Quiz“及其子类”谢谢“：

<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/”，并调用第三个模板，但传递的数据似乎与调用它的父模板相同。

因此，对于所有具有更高智力和经验的存在，我，告诉我如何懒惰并递归地调用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>

​