如何递归调用/运行jQuery嵌套模板

如何解决如何递归调用/运行jQuery嵌套模板

|| 好的，这有点像json对象和jquery模板的初始化...我想知道如何更深入。问题是我很懒，并且希望代码为我完成工作。   问：>您如何递归调用jQuery模板。 采取这个json对象：

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

我可以使用以下模板轻松访问\“ Quiz \”及其子级\“ Thankyou \”：

<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中。它不喜欢我的脚本标签。 :(     

解决方法

        我认为您只需要检查是否存在Children，并使用Children作为数据递归调用同一项目模板。您将有条件地还添加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>