will it be a problem if I use data-sly-list=${model.personList} without double quotes

[GnanendraReddyPonnala]

1. data-sly-list=${model.personList}
2. data-sly-list="${model.personList}"

Both are compiled, rendering the data as expected, is it ok if I use data-sly-list=${model.personList} without double quotes

please let me know the difference, I don't have requirement to use @BEGIN, end

[Nupur_Jain · Accepted solution]

Hi @GnanendraReddyPonnala 

data-sly-list=${model.personList} will working for you as HTL is server side template language that must follow correct HTML syntax and specification that is HTL must be correct HTML file and HTML5 specification supports attribute value without quotes.

An attibute must be put in quotes if it has space or some special character. But personally, I think its more clean to use quotes.

You can even read https://html.spec.whatwg.org/multipage/syntax.html#unquoted to get more clarification.

Hope it helps!

Thanks

Nupur

[Umesh_Thakur]

Sightly is a kind of extended HTML only so if you need to pass any data to HTML attribute, you will have to put it either in single or double quote so use of quote in sightly is similar to that only that but there are some sighlty specific tags or attributes like data-sly--..... for those as a best practice you will have to follow double quote.

for your next part of question please see the below link

https://www.aemtutorial.info/p/htl-sly-list.html

Hope this helps

Umesh Thakur

[abhishekanand_]

Hi @GnanendraReddyPonnala 

double quotes tell HTL (Sightly) to evaluate the expression model.personList and treat the result as a string. This ensures that any special characters within model.personList are interpreted correctly.

without double quotes HTL attempts to interpret model.personList directly as an HTL expression.

[BrianKasingli]

Dealing with Sightly, it is recommended as Adobe's best practices to wrap HTML attributes with double quotes, its in the documentation here. https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md#226-list

I would defer to these best practices and convention naming for the way to go!

<!--/* By default the 'item' identifier is defined within the loop. */-->
<ul data-sly-list="${currentPage.listChildren}">
    <li>${item.title}</li>
</ul>

<!--/* This is how the name of the 'item' identifier can be customised. */-->
<ul data-sly-list.childPage="${currentPage.listChildren}">
    <li>${childPage.title}</li>
</ul>

<!--/* Iteration control; start from the beginning, stop after the first 10 elements (index 9) */-->
<ul data-sly-list="${currentPage.listChildren @ begin = 0, end = 9}">
    <li>${item.title}</li>
</ul>

<!--/* Iteration control; start from the 11th element (index 10), stop after the next 10 elements (index 19) */-->
<ul data-sly-list="${currentPage.listChildren @ begin = 10, end = 19}">
    <li>${item.title}</li>
</ul>

Even if the code works, it's essential to follow best practices. As coding experts often emphasize, just because something functions doesn't mean it's the optimal solution. Prioritize best practices for maintainability, readability, and efficiency.

[HrishikeshKa]

Hi @GnanendraReddyPonnala ,

It is recommended to use double quotes around the `data-sly-list` expression in AEM Sightly templates. While both `data-sly-list=${model.personList}` and `data-sly-list="${model.personList}"` may work and render the data as expected, using double quotes is considered best practice for several reasons:

1. Consistency: Using double quotes consistently throughout your codebase can make it easier to read and maintain your code.

2. Avoiding Syntax Errors: Using double quotes can help avoid syntax errors that may occur if the expression contains special characters or spaces.

3. Future Compatibility: While the current version of Sightly may allow for expressions without double quotes, future versions may require them. Using double quotes ensures that your code will be compatible with future versions of Sightly.

In general, it's a good practice to use double quotes around all expressions in Sightly templates, including `data-sly-list`, `data-sly-repeat`, and `data-sly-resource`. This can help ensure consistency and avoid potential issues in the future.