How to add the Author/Edit mode condition in sightly/HTL for class attribute values.?

Question

I have a HTML snippet as below.

 <div id="mydivid" class="abcd xyz myclass">
....
...
</div>

I have wrote it in below way. but it doesn't shows the entire dive in wcmmode=disabled.

<div data-sly-test.editor="${wcmmode.edit || wcmmode.design}">
<div id="mydivid" class="abcd xyz myclass">
</div>
....
...
<div data-sly-test.editor="${wcmmode.edit || wcmmode.design}">
</div>
</div>

Is there any way to add "myclass" value to the class attribute alone only in author mode and not in preview or disabled mode of AEM page.

Answer 1

HTL provides better flexibility to write test conditions which avoids using the JSTL style if conditions. Your code can be easily written as shown below

<div id="mydivid" class="abcd xyz ${wcmmode.disabled ? '' : 'myclass'}"></div>

In case you don't want any classes in publish, then

<div id="mydivid" class="${wcmmode.disabled ? '' : 'abcd xyz myclass'}"></div>

The HTL specification for reference.

Answer 2

<sly data-sly-test="${wcmmode.edit}">
<div id="mydivid" class="abcd xyz myclass">
</div>
</sly>
<sly data-sly-test="${wcmmode.disabled}">
<div id="mydivid" class="abcd xyz">
</div>
</sly>

Try this, as it will display your myclass only in edit mode, in wcmode=disabled mode, it will display the resepctive class without myclass