How nested Template inside function in alphine v3? #1780

creativeplus2 · 2021-07-13T05:48:29Z

creativeplus2
Jul 13, 2021

Hi All!,

ini Alphine js v2 this treemenu code is working but in alpine v3 not working
can someone help ?

<html>
    <div x-data="getNav()"
    x-init="fetch('../js/nav-data.json').then(response => response.json()).then(data => navs = data)"
    >
    <ul class="nav static flex items-center justify-center" id="navbar">
        <template x-for="nav in navs">
            <li class="current dropdown  relative block text-center mr-8 py-8" x-html="renderNav(nav)"></li>
        </template>
    </ul>
</div>
</html>
<!-- <script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script> -->

<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>	

<script>
function getNav() {
    return {
        navs: [],
        renderNav: function (obj) {
            let 
                    html = `
                        <a x-bind:href="nav.uri">
                        <span x-text="nav.title">0</span></a>`
                    if (obj.children) {
                    html += `
                        <ul>
                            <template x-for="nav in nav.children">
                                <li class="py-2 px-8 dropdown" x-html="renderNav(nav)"></li>
                            </template>
                        </ul>
                    `
                    }
                
            return html
        }
    }
}
</script>

nav-data.json

[
    {
        "title" : "First Level 1",
        "uri" : "index.html"
    },
    {
        "title": "First Level 2",
        "uri" : "index.html",
        "megamenu" :true,
        "children": [
            {
                "title": "Second Lv 2.1",
                "uri" : "index.html",
                "children": [
                    {
                        "title": "Thrid Lv 3.1",
                        "uri" : "index.html"
                    },
                    {
                        "title": "Thrid Lv 3.2",
                        "uri" : "index.html"
                    },
                    {
                        "title": "Thrid Lv 3.3",
                        "uri" : "index.html",
                        "children": [
                            {
                                "title": "Thrid Lv 3.1",
                                "uri" : "index.html"
                            },
                            {
                                "title": "Thrid Lv 3.2",
                                "uri" : "index.html"
                            },
                            {
                                "title": "Thrid Lv 3.3",
                                "uri" : "index.html"
                            }
                        ]
                    }
                ]
            },
            {
                "title": "Second Lv 2.2",
                "uri" : "index.html",
                "children": [
                    {
                        "title": "Thrid Lv 3.1",
                        "uri" : "index.html"
                    },
                    {
                        "title": "Thrid Lv 3.2",
                        "uri" : "index.html",
                        "children": [
                            {
                                "title": "Thrid Lv 3.1",
                                "uri" : "index.html"
                            },
                            {
                                "title": "Thrid Lv 3.2",
                                "uri" : "index.html"
                            },
                            {
                                "title": "Thrid Lv 3.3",
                                "uri" : "index.html"
                            }
                        ]
                    }
                ]
            }
        ]
    },
    {
        "title": "First Level 3",
        "uri" : "index.html",
        "children": [
            {
                "title": "Second Lv 3.1",
                "uri" : "index.html",
                "children": [
                    {
                        "title": "Thrid Lv 3.1",
                        "uri" : "index.html"
                    },
                    {
                        "title": "Thrid Lv 3.2",
                        "uri" : "index.html"
                    }
                ]
            },
            {
                "title": "Second Lv 3.2",
                "uri" : "index.html",
                "children": [
                    {
                        "title": "Thrid Lv 3.1",
                        "uri" : "index.html"
                    },
                    {
                        "title": "Thrid Lv 3.2",
                        "uri" : "index.html"
                    }
                ]
            }
        ]
    }

]

danddanddand · 2021-07-14T13:27:15Z

danddanddand
Jul 14, 2021

First thing I'd try is using nextTick in the x-html so $nextick( () -> renderNav(nav) ) ... I had migrated some similar code to x-effect using nextTick and $el.innerHTML = renderNav(nav) before x-html was re-introduced so you could try that as well.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

How nested Template inside function in alphine v3? #1780

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

How nested Template inside function in alphine v3? #1780

Uh oh!

Uh oh!

creativeplus2 Jul 13, 2021

Replies: 1 comment

Uh oh!

danddanddand Jul 14, 2021

creativeplus2
Jul 13, 2021

danddanddand
Jul 14, 2021