None of them worked - they all rendered empty. For control purposes to see if the attributes.class is used at all I added a static string like ${'test ' + props.spaltenklasse}. The “test” string was always correctly rendered into the class attribute.
So how can I use variables in nested fusion declarations?
prototype(MYCOMPANY.Site:Content.ElementListe) < prototype(Neos.Neos:ContentComponent) {
spaltenklasse = Neos.Fusion:Case {
eins {
condition = ${q(node).children().count() <= 1}
renderer = 'einspaltig'
}
zwei {
condition = ${q(node).children().count() <= 2}
renderer = 'zweispaltig'
}
}
renderer = Neos.Fusion:Component {
// next line is optional in this case but this is part of the Nested Component pattern, to use `props.spaltenklasse` also in the afx renderer below ...
@apply.props = ${props}
contentlist = Neos.Neos:ContentCollection {
tagName = 'main'
nodePath = 'node'
attributes.class = ${props.spaltenklasse}
}
renderer = afx`
{props.contentlist}
`
}
}
But your suggestion Inline into renderer worked and is my favorite - it’s the most compact and has the best readability. I am happy now
To accomplish a better separation I would rather prefer to outsource the afx template itself from the fusion file into a separate file than to implement two fusion files where one only holds the afx (which is suggested in Atomic.Fusion - Rendering - Manual - Neos CMS - Neos Docs). But I didn’t find an option to load an afx template file (as is available for fluid templates via Neos.Fusion::Template)
perfect, works like a charm
I saved the templates as *.jsx files since the react jsx syntax seems to come closest to afx and my IDE supports jsx syntax highlighting.
Hi,
one way I did this in the past was with @context. Reason for doing it this way was mainly, that it is the first way I found out how to expose variables and because of readability:
When you use @context, you’ll lose very fast the overview. Especially if you open the files after some time.
It is much cleaner if you use the props only where it is used. @context is inherited and can cause you e.g. problems with caching. Also, nested elements can get problems if you set e.g. node. I try to avoid it. But I use it for elements where I don’t have direct access to it: