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.
<li class="{! 'calendarEvent ' + v.zoomDirection + ' ' + (v.past ? 'pastEvent ' : '') + (v.zoomed ? 'zoom ' : '') + (v.multiDayFragment ? 'multiDayFragment ' : '')}"> <!-- content here --> </li>
Sometimes, if the markup is not broken into multiple lines, it can hurt your eyes or make you mutter profanities under your breath.
<li class="{! 'calendarEvent ' + v.zoomDirection + ' ' + (v.past ? 'pastEvent ' : '') + (v.zoomed ? 'zoom ' : '') + (v.multiDayFragment ? 'multiDayFragment ' : '')}"> <!-- content here --> </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.
<li class="{! join(' ', 'calendarEvent', v.zoomDirection, v.past ? 'pastEvent' : '', v.zoomed ? 'zoom' : '', v.multiDayFragment ? 'multiDayFragment' : '' )}"> <!-- content here --> </li>
You can also use a join expression for dynamic styling.
<div style="{! join(';', 'top:' + v.timeOffsetTop + '%', 'left:' + v.timeOffsetLeft + '%', 'width:' + v.timeOffsetWidth + '%' )}"> <!-- content here --> </div>