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 />

我有一个要传递给 myCustomJS 的 HTL 属性（例如：${properties.myCustomProperty}）。

有什么想法可以做到吗？

我环顾了网络，但没有发现任何有用的东西。

谢谢你。

4

1 回答 1

8

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

  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}" />

  1. 技巧2：（老派）-隐藏变量-将隐藏变量添加到组件渲染脚本中；使用 HTL 属性设置变量的值，并使用 getElementById 或 jquery 从客户端 js 读取变量。
  2. 技术 3：（不推荐）- 访问服务器。如果您不想稀释您的 DOM（可能属性是秘密的或对 SEO 不友好），您可能需要对返回属性值的 sling servlet 进行 ajax 调用。您可以参考多个可用于 sling servlet 的示例。 ACS 示例，AEM 6.3 servlet，还有 1 个示例。但请记住，仅仅为了 1 个属性而去服务器是不值得的。
于 2018-03-19T00:44:18.307 回答