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

发布于 2024-11-16 16:37:36 字数 1427 浏览 2 评论 0原文

好吧，这有点像 json 对象和 jquery 模板的起始...我想知道如何更深入。问题是我很懒，希望代码为我完成工作......

问：>如何递归调用 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”及其子“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 中。它不喜欢我的脚本标签。 :(

原文

Ok this is a little like inception for json objects and jquery templating... I want to know how to go deeper. The problem is that i am lazy and want the code to do the work for me....

Q:> How do you call a jQuery template recursively.

Take this json object:

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}]
     }]
 }];

I can easily get to "Quiz" and its child "Thankyou" using the following template:

<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>

also used is the html and the call to replace it:

<script type="text/javascript">
    $("#itemTemplate").tmpl(Links).appendTo("#SiteMapHolder");
</script>
<ul id="SiteMapHolder">
    <%--jQuery Template will replace this empty space--%>
</ul>

I have tried setting the type of the second template to "text/x-jquery-tmpl" and calling a 3rd template but the data being passed seems to be the same as the parent that is calling it.

so to all beings of higher intelligence and experience then i, show me the way to be lazy and call a jQuery template recursively?

PS:sorry this is not in jsFiddle. it doesn't like my script tags. :(

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我是有多爱你 2024-11-23 16:37:36

我认为您只需要检查 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>

I think you just need to check if Children exists and make a recursive call to the same item template with the Children as the data. You would conditionally also add the ul tag. See this jsfiddle for what I mean: http://jsfiddle.net/bernardchen1/SK2c6/.

The template itself that I used looks like this:

<script id="itemTemplate" type="text/x-jquery-tmpl">
<li><a href="${NiceUrl}">${Name}</a>
    {{if Children}}
    <ul>
    {{tmpl(Children) "#itemTemplate"}}
    </ul>
    {{/if}}
</li>

回复收藏 0 原文

~没有更多了~