Categories
AEM Java Programming Web Development

AEM Sightly’s nightmare

sightly-logo

I’ve been working on Sightly templates which they are calling HTL (HTML Template Language). I’ve discovered some hacks/techniques on how to manipulate variables. So, I thought I’m already used to it.

I have worked on one component which I duplicated from my working component. I know it is going to work but actually something happened. I didn’t know why it is happening that frustrates me.

The data-sly-list is showing my the list keys instead of values. I kept changing my Java Use-API to think that something is wrong with my collection.

Actually nothing is wrong with my implementation. It was actually because of the double quotes (“”) that my editor is doing. Every time I write double quote it closes it with another one. If you are rushing, you will not be able to notice this in your HTML codes.

<!-- The double quote below will give you problem -->
<div class="class-name"">
    <p>Some text here</p>
</div>

<!--/* This code will always print your list keys */-->
<!--/* Instead of giving you the list and loop it as normal */-->
<sly data-sly-list="${javaUseAPI.listItems}">
    ${itemList.index}
</sly>

I’m using Visual Studio Code as my editor. They have added auto-completion for quotes on their latest updates. To disable it, you need to do the settings below.

{
     "editor.autoClosingBrackets": false
}

I know auto-completion in your code helps developer a lot. It just happened that it caused me some trouble and frustrate me a little bit. It is a good thing to remember that not all auto-completion are helpful. Sometimes it has some disadvantages and we need to take note of it.