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

为什么不在没有模板的情况下这样做？您需要创建一个自我递归的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));

Answer 3

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

顺便问一下，你会得到什么样的错误？是否完全没有呈现模板？

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

如何使用jquery实现递归模板

3 个答案: