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

Question

所以我有以下几行加载我的JavaScript.

<sly data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}" data-sly-unwrap />
<sly data-sly-call="${clientLib.js @ categories='myhost.mycustomJS'}" data-sly-unwrap />

我有一个HTL属性(例如:$ {properties.myCustomProperty}),我想传递给myCustomJS.

有什么想法可以做到吗？

我环顾网了但没找到任何有用的东西.

谢谢.

Answer 1

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

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从clientside js中读取变量.
3. 技巧3 :(不推荐) - 去服务器旅行.如果你不想稀释你的DOM(可能是属性是秘密的,或者不是SEO友好的),你可能需要对一个返回属性值的sling servlet进行ajax调用.您可以参考吊索servlet的多个示例. ACS Sample,AEM 6.3 servlet,另外1个例子.但请记住,仅仅为1个房产去服务器是不值得的.