
Abstract
When working with AEM components, it’s very common to pass data from AEM backend to a particular JavaScript event. In this article, we will be focusing on how to pass data from AEM backend using the HTML data-* attribute.
HTML data attributes were designed apart of HTML5 where these attributes allow developers to store data, as a string, on HTML elements. With HTL, we can set a value within data attribute’s value, returned from the AEM backend via Sling Model or HTL Java Use-API or HTL JavaScript Use-API.
The data attribute’s value set will be data from the AEM backend using the HTL scripting engine and will be apart of the HTML server-side render output. Next, JavaScript will be used to access these values.
1. HTML Data Attribute Syntax
The data attribute is made up of two parts:
The attribute name should not contain any uppercase letters, and must be at least one character long after the prefix “data-“, example: data-year, data-tax-code, data-calendar-point.
The attribute value can be any string.
An example of an plain
HTML element storing multiple data attributes of values, for the use of your JavaScript logic:
A HTL implementation:
Read Full Blog
Q&A
Please use this thread to ask the related questions.
Kautuk Sahni