Markup can get messy when you specify the class names to apply based on the component attribute values. Try using a join expression for easier-to-read markup.
This example sets the class names based on the component attribute values. It’s readable, but the spaces between class names are easy to forget.
1<li class="{! 'calendarEvent ' +
2 v.zoomDirection + ' ' +
3 (v.past ? 'pastEvent ' : '') +
4 (v.zoomed ? 'zoom ' : '') +
5 (v.multiDayFragment ? 'multiDayFragment ' : '')}">
6 <!-- content here -->
7</li>Sometimes, if the markup is not broken into multiple lines, it can hurt your eyes or make you mutter profanities under your breath.
1<li class="{! 'calendarEvent ' + v.zoomDirection + ' ' + (v.past ? 'pastEvent ' : '') + (v.zoomed ? 'zoom ' : '') + (v.multiDayFragment ? 'multiDayFragment ' : '')}">
2 <!-- content here -->
3</li>Try using a join expression instead for easier-to-read markup. This example join expression sets ' ' as the first argument so that you don’t have to specify it for each subsequent argument in the expression.
1<li
2 class="{! join(' ',
3 'calendarEvent',
4 v.zoomDirection,
5 v.past ? 'pastEvent' : '',
6 v.zoomed ? 'zoom' : '',
7 v.multiDayFragment ? 'multiDayFragment' : ''
8 )}">
9 <!-- content here -->
10</li>You can also use a join expression for dynamic styling.
1<div style="{! join(';',
2 'top:' + v.timeOffsetTop + '%',
3 'left:' + v.timeOffsetLeft + '%',
4 'width:' + v.timeOffsetWidth + '%'
5)}">
6 <!-- content here -->
7</div>See Also
j