AEM 6.x：如何将 HTL 变量传递给 clientlib/JS？
AEM 6.x: How to pass an HTL variable to clientlib/JS?
所以我有以下行加载我的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。
知道怎么做吗？
我在网上找了一圈，但没有找到任何有用的东西。
谢谢。
您正在尝试使用客户端脚本访问服务器端 属性。正如您可能意识到的那样，在服务器端执行并渲染输出返回到浏览器。在您的情况下，您需要将属性发送到浏览器以使其可供客户端脚本使用。
- 技巧一：（推荐）数据属性-
这是最容易发送的，因为 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}" />
- 技巧二：（老派）-隐藏变量-在组件渲染脚本中添加隐藏变量；使用 HTL 属性 设置变量的值并使用 getElementById 或 jquery.
从客户端 js 读取变量
- 技巧 3：（不推荐）- 访问服务器。如果您不想稀释您的 DOM（可能 属性 是秘密的或对 SEO 不友好），您可能需要 ajax 调用一个 sling servlet，该 servlet returns 属性 值。您可以参考多个适用于 sling servlet 的示例。
ACS Sample, AEM 6.3 servlet, 1 more example。
但是请记住，仅仅为了 1 属性 就去服务器是不值得的。
所以我有以下行加载我的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。
知道怎么做吗？
我在网上找了一圈，但没有找到任何有用的东西。
谢谢。
您正在尝试使用客户端脚本访问服务器端 属性。正如您可能意识到的那样，在服务器端执行并渲染输出返回到浏览器。在您的情况下，您需要将属性发送到浏览器以使其可供客户端脚本使用。
- 技巧一：（推荐）数据属性- 这是最容易发送的，因为 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}" />
- 技巧二：（老派）-隐藏变量-在组件渲染脚本中添加隐藏变量；使用 HTL 属性 设置变量的值并使用 getElementById 或 jquery. 从客户端 js 读取变量
- 技巧 3：（不推荐）- 访问服务器。如果您不想稀释您的 DOM（可能 属性 是秘密的或对 SEO 不友好），您可能需要 ajax 调用一个 sling servlet，该 servlet returns 属性 值。您可以参考多个适用于 sling servlet 的示例。 ACS Sample, AEM 6.3 servlet, 1 more example。 但是请记住，仅仅为了 1 属性 就去服务器是不值得的。