will it be a problem if I use data-sly-list=${model.personList} without double quotes | Community
Skip to main content
G
GnanendraReddyPonnala
June 13, 2024
Solved

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

  • June 13, 2024
  • 5 replies
  • 1369 views
  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 @9294996, end

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Nupur_Jain

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

5 replies

Nupur_Jain
Adobe Employee
Nupur_JainAdobe EmployeeAccepted solution
Adobe Employee
June 13, 2024

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
    Community Advisor
    Umesh_ThakurCommunity Advisor
    Community Advisor
    June 13, 2024

    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_
      Community Advisor
      abhishekanand_Community Advisor
      Community Advisor
      June 13, 2024

      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.

       

      Abhishek Anand
        BrianKasingli
        Community Advisor and Adobe Champion
        BrianKasingliCommunity Advisor and Adobe Champion
        Community Advisor and Adobe Champion
        June 14, 2024

        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.

         
          HrishikeshKagne
          Community Advisor
          HrishikeshKagneCommunity Advisor
          Community Advisor
          June 14, 2024

          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.

          Hrishikesh Kagane
            Terms & ConditionsAccessibility statement

            Loading footer...