How do I add data-sly-list functionality inside a javascript function?

[pmueller8]

I'm writing a script that I'd like the author to be able to add new lines to the script as they add new elements to the page. The problem is I only know how to use the data-sly-list option in html in a <sly> tag. Here is an example of my script so you get the idea of what I'm trying to accomplish. I'm afraid the solution is creating a complicated sling model. My front-end knowledge struggles with those. More simple the solution the better. Thanks.

<script>
        ui.validator(document.getElementById('${properties.formId @ context="scriptString"}'), {
            fields: {
                <sly data-sly-list.item="${list.validateItemsList @ context="scriptString"}">
                    ${properties.multiinputid @ context="scriptString"}: { errorMessage: '${properties.multierrmessage @ context="scriptString"}', errorLocation: '${properties.multierrlocation @ context="scriptString"}', pattern: '${properties.multipattern @ context="scriptString"}', required: ${properties.multirequired @ context="scriptString"} },
                </sly>
                ${properties.lastinputid @ context="scriptString"}: { errorMessage: '${properties.lasterrmessage @ context="scriptString"}', errorLocation: '${properties.lasterrlocation @ context="scriptString"}', pattern: '${properties.lastpattern @ context="scriptString"}', required: ${properties.lastrequired @ context="scriptString"} }
            }
        });
</script>

[Anny0505]

@pmueller8 , you can use COral UI to display select list and documentation is https://www.adobe.io/experience-manager/reference-materials/6-5/coral-ui/coralui3/Coral.List.html  through JS.

Thanks,

Aruna

[pmueller8]

Thanks for jumping in to help me. Of course in typical AEM fashion, the documentation is really vague and hard to understand. Any idea if there is any documentation that gives use cases or examples of this in action?

[Jörg_Hoh · Accepted solution]

You are mixing frontend and backend. HTL is a language which is handled on the backend, and it will output in valid HTML. 

Your browser cannot handle HTL, because even if the language interpreter would exist, it does not have access to all the data, which is required to execute; for example, the page properties are not available in the browser.