使用 jquery 模板的递归过多

Question

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

谁能告诉我在这里做错了什么？：code in 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>

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");

Answer 1

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>