Как элегантно создать дерево в шаблоне .ejs? - PullRequest
Новая
       18

Как элегантно создать дерево в шаблоне .ejs?

0 голосов
/ 22 апреля 2019

Я хочу создать древовидный виджет меню в шаблоне ejs с помощью объекта json, переданного в качестве источника.

Сейчас у меня есть 2 рекурсивных функции внутри файла ejs (сначала для главного меню, а затем дляэлементы подменю), но таким образом я не нравлюсь.

Я не нашел другого элегантного способа сделать это.Кто-нибудь может мне помочь?

Этот вопрос похож на этот Шаблоны EJS: Как создать древовидную структуру HTML наиболее элегантным и удобным способом 

<%
function CreateMenu(obj){
    let header = '<div id="header">';
    header += '<ul id="leftmenu">';
    for (let [key, element] of Object.entries(obj.left_header)) {
        if(element.class == 'divider'){
            header += '<li class="divider"></li>';
            continue;
        }
        header += '<li>';
        let dataRel = element.sub_items.length == 0 ? 'data-rel=foglia' : "";
        header += '<a class="'+ element.class +'" href="'+ element.href +'" title="'+ element.title +'" '+ dataRel +' >'+element.text+'</a>';
       if(element.sub_items.length > 0) {
            header += CreateSubMenu(element.sub_items, 'ul-menu');
       }
       header += '</li>';
    }
    header += '</ul>';

    header += '<ul id="rightmenu">';
    for (let [key, element] of Object.entries(obj.left_header)) {
        if(element.class == 'divider'){
            header += '<li class="divider"></li>';
            continue;
        }
        header += '<li>';
        let dataRel = element.sub_items.length == 0 ? 'data-rel=foglia' : "";
        header += '<a class="'+ element.class +'" href="'+ element.href +'" title="'+ element.title +'" '+ dataRel +' >'+element.text+'</a>';
        if(element.sub_items.length > 0) {
            header += CreateSubMenu(element.sub_items, 'ul-menu');
        }
        header += '</li>';
    }
    header += '</ul>';

    header += '</div>';
    return header;
}



function CreateSubMenu(arrSubMenu, className) {
    let submenu = '<ul class="'+className+'">';
    for (let [key, subElement] of Object.entries(arrSubMenu)) {
        if(subElement.class == 'divider'){
            submenu += '<li class="divider"></li>';
            continue;
        }
        submenu += '<li>';
        let dataRel = subElement.sub_items.length == 0 ? 'data-rel=foglia' : "";
        submenu += '<a class="'+ subElement.class +'" href="'+ subElement.href +'" title="'+ subElement.title +'" '+ dataRel +' >'+subElement.text;
        if(subElement.sub_items.length > 0 ) {
            submenu += '<span class="ui-icon ui-icon-caret-1-e btn-menu-arrow"></span>';
        }
        submenu += '</a>';
        if(subElement.sub_items.length > 0) {
            submenu += CreateSubMenu(subElement.sub_items, 'ul-submenu');
        }
        submenu += '</li>';
    };

    submenu += '</ul>';
    return submenu;

}
%>

<%- CreateMenu(header) %>
...