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进行检索。例如：
＆＃13;
＆＃13;
var value = $('#mydiv').data('custom-property');
console.log(value);
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv" data-custom-property="${properties.myCustomProperty}" />
＆＃13;
＆＃13;
＆＃13;
1. 技巧2 :(旧学校） - 隐藏变量 - 将隐藏变量添加到组件渲染脚本中;使用HTL属性设置变量的值，并使用getElementById或jquery从clientside js读取变量。
2. 技巧3 :(不推荐） - 去服务器旅行。如果你不想稀释你的DOM（可能是属性是秘密的，或者不是SEO友好的），你可能需要对一个返回属性值的sling servlet进行ajax调用。您可以参考吊索servlet的多个示例。 ACS Sample，AEM 6.3 servlet，1 more example。 但要记住，仅仅为1个房产去服务器是不值得的。