jquery如何实现递归模板

Question

我从数据库中获取一个 json，然后动态加载一个模板并应用该 json。此变量中存储的数据是自引用的（典型的 id - parent_id）。 我无法对该数据进行递归。

json：

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

这是我渲染模板的方式：

$.get("template_file.txt", function(template)
{
    $.tmpl(template, my_json).appendTo("#some_div");
});

最后是模板（template_file.txt）：

<ul class="modules_ul">
    {{each(i, module) modules}}
        <li>${module.mod_name}</li>
        {{each(j, submodule) module.sub_modules}}

            {{tmpl(submodule) ".modules_ul" }} //what goes here?

        {{/each}}
    {{/each}}
</ul>

有人可以帮我吗？提前致谢！

编辑： 添加了jsfiddle 来玩

解决方案：在post中查看 mblase75 的回答

Answer 1

应该是这样的

<ul class="modules_ul">
    {{each(i, module) modules}}
        <li>${module.mod_name}</li>
        {{if module.sub_modules}}
            {{tmpl(module.sub_modules) "template_name"}}
        {{/if}}
    {{/each}}
</ul>

Answer 2

这个递归模板适合我。与您的示例几乎没有区别：模板是内联的，模板是通过 id 而不是类访问的，并且在渲染嵌套模板之前添加了额外的 if 检查。

顺便问一下，你得到什么样的错误？模板根本不渲染吗？

<script type="text/javascript">
    var data =
    {
        name: "Root",
        children:
        [
            { name: "Child1",
                children:
                [{ name: "SubChild1"}]
            },
            {
                name: "Child2",
                children:
                [{ name: "SubChild2"}]
            }
        ]
    };

    $(function () {
        $("#template").tmpl(data).appendTo("#target");

    });
</script>
<script type="text/html" id="template">
<div id="template">
    <h3>
        ${name}</h3>
    <div style="position:relative; margin-left:10px">
        {{if children}} 
            {{each(i, child) children}} 
                {{tmpl(child) "#template" }}
            {{/each}}
        {{/if}}
    </div>
</div>
</script>
<div id="target">
</div>

Answer 3

为什么不使用模板呢？您需要创建一个自身递归的 JavaScript 函数：

function recursive(modules) {
    var arr_html = new Array;
    for (var j=0; j<modules.length; j++) {
        arr_html.push("<ul>");
        arr_html.push("<li>"+modules[j].mod_name+"</li>");
        if (modules[j].sub_modules.length) // it's an array
            arr_html.push(recursive(modules[j].sub_modules));
        arr_html.push("</ul>");
    }
    return arr_html.join("");
}
$('body').append(recursive(my_json.modules));