Как добиться рекурсивных шаблонов с помощью jquery - PullRequest
Новая
       23

Как добиться рекурсивных шаблонов с помощью jquery

3 голосов
/ 30 августа 2011

Я получаю json из базы данных, затем динамически загружаю шаблон и применяю этот json. Данные, хранящиеся в этой переменной, ссылаются на себя (типичный идентификатор - 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>

Кто-нибудь может мне помочь? Заранее спасибо!

Edit: добавил jsfiddle , чтобы поиграть

РЕШЕНИЕ: см. Ответ mblase75 в этом сообщении

Ответы [ 3 ]

1 голос
/ 03 октября 2012

Так и должно быть 

<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>
0 голосов
/ 31 августа 2011

Этот рекурсивный шаблон работает для меня. В вашем примере есть несколько отличий: шаблон встроен, шаблон доступен по идентификатору, а не по классу, и дополнительно, если проверки добавляются перед рендерингом вложенного шаблона.

Кстати, какую ошибку вы получаете? Шаблон не отображается вообще? 

<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>
0 голосов
/ 31 августа 2011

Почему бы не сделать это без шаблона? Вам нужно будет создать функцию 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));
...