Nested prototypes for navigation rendering - Neos.Fusion:Case issue

Using Neos & Flow
1

Hi,

based on the Demo package, I am trying to refactor the Fluid code for navigation rendering. I created one prototype each for menu items and sub-items:
Neos.Demo:Document.Fragment.Menu.Main calls Neos.Demo:Document.Fragment.Menu.Main.Item and it calls Neos.Demo:Document.Fragment.Menu.Main.SubItem.
In the Neos.Demo:Document.Fragment.Menu.Main.Item was appended a Neos.Fusion:Case to render data-toggle=“dropdown” for the menu items with childs (e.g. for menu item “Features”) and otherwise - data-toggle=" "
The condition @if.has={props.currItem.subItems} in the “afx”-code of Neos.Demo:Document.Fragment.Menu.Main.Item is working well but the similar condition in Neos.Fusion:Case of the same prototype returns all the time ‘false’.
May be I doing something wrong, I am working with Fusion only for a few days. Thanks in advance.

Best regards,
Alexander

ps. sorry for the long code but I think is it better to understand the issue

------------------------------------------------------------------------------------------
Packages/Sites/Neos.Demo/Resources/Private/Fusion/Document/Fragment/Menu/Main.fusion
------------------------------------------------------------------------------------------
prototype(Neos.Demo:Document.Fragment.Menu.Main) < prototype(Neos.Fusion:Component) {
    root = ${site}
    menuItems = Neos.Neos:MenuItems

    renderer = afx`
        <nav class="navbar navbar-color-on-scroll navbar-transparent    fixed-top  navbar-expand-lg " color-on-scroll="100" id="sectionsNav">
            <div class="container">
                <div class="navbar-translate">
                    <a class="navbar-brand" href="http://neos.local"> NEOS</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="navbar-toggler-icon"></span>
                        <span class="navbar-toggler-icon"></span>
                        <span class="navbar-toggler-icon"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="navbar-nav ml-auto">
                        <Neos.Fusion:Loop items={props.menuItems}>
                            <Neos.Demo:Document.Fragment.Menu.Main.Item currItem={item}/>
                        </Neos.Fusion:Loop>
                    </ul>
                </div>
            </div>
        </nav>
    `

    @cache {
        mode = 'cached'
        entryIdentifier {
            documentNode = ${documentNode}
        }
        entryTags {
            1 = ${Neos.Caching.nodeTypeTag('Neos.Neos:Document', documentNode)}
        }
    }
}

------------------------------------------------------------------------------------------
Packages/Sites/Neos.Demo/Resources/Private/Fusion/Document/Fragment/Menu/MainItem.fusion
------------------------------------------------------------------------------------------
prototype(Neos.Demo:Document.Fragment.Menu.Main.Item) < prototype(Neos.Fusion:Component) {
    currItem = ${currItem}

    dataToggle = Neos.Fusion:Case {
        isTrue {
            condition = ${props.currItem.subItems}
            renderer = 'dropdown'
        }
        default {
            condition = ${true}
            renderer = ' '
        }
    }

    renderer =  @if.has={props.currItem.subItems}`
        <li class={props.currItem.state+" dropdown nav-item"}>
        <Neos.Neos:NodeLink node={props.currItem.node} attributes.class="dropdown-toggle nav-link" attributes.data-toggle={props.dataToggle}>{item.label}</Neos.Neos:NodeLink>
        <div
            @if.has={props.currItem.subItems}
            class="dropdown-menu "
        >
            <Neos.Fusion:Loop items={item.subItems} itemName="item">
                <Neos.Demo:Document.Fragment.Menu.Main.SubItem currSubItem={item}/>
            </Neos.Fusion:Loop>
        </div>
        </li>
    `
}

------------------------------------------------------------------------------------------
Packages/Sites/Neos.Demo/Resources/Private/Fusion/Document/Fragment/Menu/MainSubItem.fusion
------------------------------------------------------------------------------------------
prototype(Neos.Demo:Document.Fragment.Menu.Main.SubItem) < prototype(Neos.Fusion:Component) {
    currSubItem = ${currSubItem}

    renderer = afx`
        <Neos.Neos:NodeLink node={props.currSubItem.node} attributes.class="dropdown-item">{props.currSubItem.label}</Neos.Neos:NodeLink>
    `
}


------------------------------------------------------------------------------------------
OUTPUT.HTML
------------------------------------------------------------------------------------------

........
<nav class="navbar navbar-color-on-scroll navbar-transparent    fixed-top  navbar-expand-lg " color-on-scroll="100" id="sectionsNav">
	<div class="container">
		<div class="navbar-translate"><a class="navbar-brand" href="http://neos.local">NEOS </a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
				<span class="sr-only">Toggle navigation</span>
				<span class="navbar-toggler-icon"></span>
				<span class="navbar-toggler-icon"></span>
				<span class="navbar-toggler-icon"></span>
			</button>
		</div>
		<div class="collapse navbar-collapse">
			<ul class="navbar-nav ml-auto">
				<li class="normal dropdown nav-item">
					<a href="/" class="dropdown-toggle nav-link" data-toggle=" ">Home</a>
				</li>
				<li class="normal dropdown nav-item">
					<a href="/en/features.html" class="dropdown-toggle nav-link" data-toggle=" ">Features</a>
					<div class="dropdown-menu ">
						<a href="/en/features/shortcuts.html" class="dropdown-item">Shortcuts</a>
						<a href="/en/features/multiple-columns.html" class="dropdown-item">Multiple columns</a>
						<a href="/en/features/text-and-images.html" class="dropdown-item">Text & images</a>
........Preformatted text
2

Hi,
after many trials, I found a working solution. Instead of the prototype’s property “currItem” (:Document.Fragment.Menu.Main.Item), I use in the case-condition-check the loop iterator-variable ‘item’ of the callee-prototype (:Document.Fragment.Menu.Main):

condition = ${item.subItems}   // it works
condition = ${props.currItem.subItems}   // doesn't work

in the “afx”-code of :Document.Fragment.Menu.Main.Item the property “currItem” works well:

<div @if.has={props.currItem.subItems} class="dropdown-menu " >

Best regards
Alexander

3

Hi,

props of the current component are only available inside the renderer.

4

Hello Sebastian,
thanks for your reply, that is of course logical - good to know.