使用 jquery 模板进行过多的递归

发布于 2024-12-02 06:40:22 字数 1813 浏览 1 评论 0原文

我正在尝试渲染递归模板，但出现“递归过多”错误...

任何人都可以告诉我这里做错了什么吗？： jsfiddle 中的代码

谢谢！

编辑 1（添加到帖子中的代码）：

HTML

<script id="my_template" type="text/j-query-tmpl">
    <ul class="modules_ul">
        {{each(i, module) modules}}
        <li>${module.mod_name}</li>
        {{if module.sub_modules}}
            {{tmpl "my_template_compiled"}}
        {{/if}}
        {{/each}}
    </ul>
</script>

var data = {"modules":[
    {
        "id_modules": "1",
        "id_modules_parent": "0",
        "mod_name": "mod 1",
        "sub_modules": [
            {
                "id_modules": "5",
                "id_modules_parent": "1",
                "mod_name": "mod 1a"
            },
            {
                "id_modules": "7",
                "id_modules_parent": "1",
                "mod_name": "mod 1b"
            }
        ]
    },
    {
        "id_modules": "2",
        "id_modules_parent": "0",
        "mod_name": "mod 2",
        "sub_modules": [
            {
                "id_modules": "6",
                "id_modules_parent": "2",
                "mod_name": "mod 2a",
                "sub_modules": [
                    {
                        "id_modules": "3",
                        "id_modules_parent": "6",
                        "mod_name": "mod 2aa"
                    }
                ]
            },
            {
                "id_modules": "4",
                "id_modules_parent": "2",
                "mod_name": "mod 2b"
            }
        ]
    }
]};


$("#my_template").template("my_template_compiled");

$.tmpl("my_template_compiled", data).appendTo("#some_div");

原文

I'm trying to render a recursive template, but I'm getting a "too much recursion" error...

Can anyone tell what I'm doing wrong here?: code in jsfiddle

Thanks!

EDIT 1 (code added to post):

The HTML

<script id="my_template" type="text/j-query-tmpl">
    <ul class="modules_ul">
        {{each(i, module) modules}}
        <li>${module.mod_name}</li>
        {{if module.sub_modules}}
            {{tmpl "my_template_compiled"}}
        {{/if}}
        {{/each}}
    </ul>
</script>

The JS

var data = {"modules":[
    {
        "id_modules": "1",
        "id_modules_parent": "0",
        "mod_name": "mod 1",
        "sub_modules": [
            {
                "id_modules": "5",
                "id_modules_parent": "1",
                "mod_name": "mod 1a"
            },
            {
                "id_modules": "7",
                "id_modules_parent": "1",
                "mod_name": "mod 1b"
            }
        ]
    },
    {
        "id_modules": "2",
        "id_modules_parent": "0",
        "mod_name": "mod 2",
        "sub_modules": [
            {
                "id_modules": "6",
                "id_modules_parent": "2",
                "mod_name": "mod 2a",
                "sub_modules": [
                    {
                        "id_modules": "3",
                        "id_modules_parent": "6",
                        "mod_name": "mod 2aa"
                    }
                ]
            },
            {
                "id_modules": "4",
                "id_modules_parent": "2",
                "mod_name": "mod 2b"
            }
        ]
    }
]};


$("#my_template").template("my_template_compiled");

$.tmpl("my_template_compiled", data).appendTo("#some_div");

分享到QQ

分享到微博

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

发布评论

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

梦亿 2024-12-09 06:40:22

http://jsfiddle.net/aNPvz/22/ （不要问我为什么要点不要在 jsFiddle 上渲染；当我构建自己的页面时，它们会渲染。）

{{tmpl "my_template_compiled"}} 调用整个模块而不仅仅是子模块。请注意对 json 结构的更改以使递归成为可能。

<html>
<head>
<style></style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

<script id="my_template" type="text/j-query-tmpl">
    <ul class="modules_ul">
        {{each(i, module) modules}}
        <li>${module.mod_name}</li>
        {{if module.sub}}
            {{tmpl(module.sub) "my_template_compiled"}}
        {{/if}}
        {{/each}}
    </ul>
</script>

<script>

$(function() {
    $("#my_template").template("my_template_compiled");
    $.tmpl("my_template_compiled", data).appendTo("#some_div");
});

var data = {"modules":[
    {
        "id_modules": "1",
        "id_modules_parent": "0",
        "mod_name": "mod 1",
        "sub":{"modules": [
            {
                "id_modules": "5",
                "id_modules_parent": "1",
                "mod_name": "mod 1a"
            },
            {
                "id_modules": "7",
                "id_modules_parent": "1",
                "mod_name": "mod 1b"
            }
        ]}
    },
    {
        "id_modules": "2",
        "id_modules_parent": "0",
        "mod_name": "mod 2",
        "sub":{"modules": [
            {
                "id_modules": "6",
                "id_modules_parent": "2",
                "mod_name": "mod 2a",
                "sub":{"modules": [
                    {
                        "id_modules": "3",
                        "id_modules_parent": "6",
                        "mod_name": "mod 2aa"
                    }
                ]}
            },
            {
                "id_modules": "4",
                "id_modules_parent": "2",
                "mod_name": "mod 2b"
            }
        ]}
    }
]};


</script>
</head>
<body>

<div id="some_div"></div>


</body>
</html>

http://jsfiddle.net/aNPvz/22/ (Don't ask me why the bullet points don't render on the jsFiddle; they do when I build my own page.)

{{tmpl "my_template_compiled"}} was calling the entire modules instead of just the sub-modules. Note the change to your json structure to make recursion possible.

<html>
<head>
<style></style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

<script id="my_template" type="text/j-query-tmpl">
    <ul class="modules_ul">
        {{each(i, module) modules}}
        <li>${module.mod_name}</li>
        {{if module.sub}}
            {{tmpl(module.sub) "my_template_compiled"}}
        {{/if}}
        {{/each}}
    </ul>
</script>

<script>

$(function() {
    $("#my_template").template("my_template_compiled");
    $.tmpl("my_template_compiled", data).appendTo("#some_div");
});

var data = {"modules":[
    {
        "id_modules": "1",
        "id_modules_parent": "0",
        "mod_name": "mod 1",
        "sub":{"modules": [
            {
                "id_modules": "5",
                "id_modules_parent": "1",
                "mod_name": "mod 1a"
            },
            {
                "id_modules": "7",
                "id_modules_parent": "1",
                "mod_name": "mod 1b"
            }
        ]}
    },
    {
        "id_modules": "2",
        "id_modules_parent": "0",
        "mod_name": "mod 2",
        "sub":{"modules": [
            {
                "id_modules": "6",
                "id_modules_parent": "2",
                "mod_name": "mod 2a",
                "sub":{"modules": [
                    {
                        "id_modules": "3",
                        "id_modules_parent": "6",
                        "mod_name": "mod 2aa"
                    }
                ]}
            },
            {
                "id_modules": "4",
                "id_modules_parent": "2",
                "mod_name": "mod 2b"
            }
        ]}
    }
]};


</script>
</head>
<body>

<div id="some_div"></div>


</body>
</html>

回复收藏 0 原文

~没有更多了~