好吧,这有点像 json 对象和 jquery 模板的起始...我想知道如何更深入。问题是我很懒,希望代码为我完成工作......
Q:> How do you call a jQuery template recursively.
获取这个 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”及其子项“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>
关于javascript - 如何递归调用/运行 jQuery 嵌套模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6433936/