AEM Touch UI页面属性对话框JS监听器：客户端库加载异常及替代方案咨询

我之前也碰到过类似的情况——给页面属性对话框配置cq:ClientLibraryFolder并指定cq.authoring.dialog类别后，listener.js死活加载不出来。这种情况大概率是配置细节没踩对，或者可以换几种更可靠的方式来实现，下面给你拆解一下：

先排查现有clientlibs的配置问题 #

有时候不是方式不对，是基础配置漏了细节：

• 确认你的clientlibs文件夹jcr:primaryType确实是cq:ClientLibraryFolder，别写成其他类型
• 检查categories属性是字符串数组（不是单个字符串），里面要准确包含cq.authoring.dialog
• 如果你的listener.js依赖其他库（比如cq.jquery、granite.ui），一定要在dependencies属性里声明这些依赖，不然会因为依赖缺失加载失败
• 核对js.txt文件：确保里面正确写了listener.js的路径，比如文件就在clientlibs根目录的话，直接写listener.js就行，路径错了肯定加载不到

替代方案1：直接在对话框节点中引入clientlibs/JS文件 #

绕过全局clientlibs类别加载，直接在页面属性对话框里硬引入，这种方式更直接：

1. 找到页面属性对话框的节点（默认路径是/libs/cq/gui/components/authoring/dialogs/page，如果是自定义的就在/apps下对应路径）
2. 添加一个cq:ClientLibraryInclude类型的节点，指定你的clientlibs类别：

<custom-dialog-clientlib
    jcr:primaryType="cq:ClientLibraryInclude"
    categories="[your.custom.authoring.category]"
/>

或者直接引入单个listener.js文件：

<include-listener
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/include"
    path="/apps/your-project/clientlibs/dialog/listener.js"
/>

替代方案2：在自定义对话框组件上声明clientlib #

如果是自己开发的页面属性对话框组件，可以直接在cq:dialog节点上添加clientlib属性，指定要加载的clientlibs类别：

<cq:dialog
    jcr:primaryType="nt:unstructured"
    sling:resourceType="cq/gui/components/authoring/dialog"
    clientlib="[your.custom.authoring.category]"
>
    <!-- 对话框的各个tab和字段 -->
</cq:dialog>

最后别忘了排查缓存坑 #

AEM的缓存有时候会坑人，配置改了但浏览器或服务器还存着旧缓存：

• 用Ctrl+Shift+R强制刷新页面，清除浏览器缓存
• 到AEM的/system/console/bundles页面刷新相关bundle，或者到/system/console/osgi-installer重新安装你的包
• 必要时清除AEM的dispatcher缓存（如果用了dispatcher的话）

如果是自定义页面模板的页面属性，还要确认你的模板正确引用了自定义对话框，没有继承错基础模板的配置哦。

内容的提问来源于stack exchange，提问作者vssrnr