AEM 6。x: 如何将HTL变量传递给clientlib/JS?

您正在尝试使用客户端脚本访问服务器端属性。正如您可能意识到的,在服务器端执行sightly,并将渲染输出返回到浏览器。在您的情况下,您需要将属性发送到浏览器,以使其可供客户端脚本使用。

1. 技巧1:(推荐)数据属性- 这是最容易发送的,因为DOM结构没有改变。将值作为数据元素传递,并使用jquery检索。例如:

var value = $('#mydiv').data('custom-property');
console.log(value);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv" data-custom-property="${properties.myCustomProperty}" />

2. 技巧2:(老派)-隐藏变量-将隐藏变量添加到组件渲染脚本中;使用HTL属性设置变量的值,并使用getElementById或jquery从客户端js读取变量。
3. 技巧3:(不推荐)-访问服务器。如果不想稀释DOM(可能属性是机密的或不利于SEO),则可能需要对返回属性值的sling servlet进行ajax调用。您可以参考sling servlet的多个示例。 ACS Sample ,则, AEM 6.3 servlet ,则, 1 more example 。 但请记住,仅仅为了一个属性而访问服务器是不值得的。