AEM 6.1中Touch UI对话框dialog.ready事件不触发及动态下拉需求

我之前在迁移Classic UI的动态select到Touch UI时，也踩过dialog.ready不触发的坑——毕竟Touch UI用的是Granite/Coral的事件体系，和Classic UI那套完全不同。下面给你梳理解决思路和具体实现：

先解决dialog.ready不触发的问题 #

Touch UI里根本没有dialog.ready这个事件！你需要绑定**foundation-contentloaded**事件（当对话框内容加载完成时触发），或者监听coral-overlay:open（对话框弹出时触发）。推荐用前者，因为它能确保对话框的DOM已经完全渲染。

举个绑定的例子：

$(document).on('foundation-contentloaded', function(e) {
    const $targetDialog = $(e.target);
    // 用对话框的类名或者特定属性来精准匹配，避免影响其他对话框
    if ($targetDialog.hasClass('my-custom-dialog')) {
        loadDynamicSelectOptions($targetDialog);
    }
});

动态加载选项到Coral Select #

Touch UI的select是Coral Web Component，不能像传统HTML select那样直接操作<option>标签，必须用Coral的API来添加选项。这里给你写一个完整的AJAX加载函数：

function loadDynamicSelectOptions($dialog) {
    // 找到目标select组件（替换成你的name属性）
    const $selectEl = $dialog.find('coral-select[name="./myDynamicSelect"]');
    if (!$selectEl.length) return;

    // 转换成Coral.Select实例，方便调用API
    const selectComponent = $selectEl[0];

    // 先清空现有选项（可选，根据需求调整）
    selectComponent.items.clear();

    // 发起AJAX请求外部服务
    $.ajax({
        url: 'https://your-external-service.com/api/get-options',
        method: 'GET',
        dataType: 'json',
        success: (response) => {
            // 假设返回的response是[{value: "opt1", label: "选项1"}, ...]格式
            response.forEach(opt => {
                const coralOption = new Coral.Select.Item();
                coralOption.value = opt.value;
                coralOption.content = opt.label;
                selectComponent.items.add(coralOption);
            });

            // 可选：设置默认选中第一个选项
            if (response.length > 0) {
                selectComponent.value = response[0].value;
            }
        },
        error: (xhr, status, err) => {
            console.error('加载动态选项失败:', err);
            // 添加错误提示选项
            const errorOpt = new Coral.Select.Item();
            errorOpt.value = '';
            errorOpt.content = '加载选项失败，请稍后重试';
            selectComponent.items.add(errorOpt);
        }
    });
}

常见问题排查 #

• 脚本加载时机不对：确保你的clientlib依赖了granite.jquery和coral-ui3（根据AEM版本，比如6.5用coral-ui3，AEMaaCS用coral-ui4），并且在对话框加载前就加载完成。
• 跨域问题：如果外部服务和AEM不同域，要么让服务端配置CORS，要么在AEM里配置反向代理（通过Apache Sling Proxy Servlet），否则AJAX会被浏览器拦截。
• Coral API使用错误：千万不要直接用$selectEl.append('<option>...</option>')，这样Coral组件不会识别到新选项，必须用items.add()方法。
• 对话框匹配不准确：打开浏览器开发者工具，查看你的对话框的class或者data-path属性，确保$targetDialog.hasClass(...)能精准命中目标对话框。

替代方案：服务器端预加载（更稳定） #

如果AJAX方式遇到跨域或者性能问题，推荐用Sling Model在服务器端请求外部服务，把数据预加载到对话框里：

1. 写一个Sling Model请求外部服务：

@Model(adaptables = SlingHttpServletRequest.class)
public class DynamicOptionsModel {
    @Getter
    private List<SelectOption> options;

    @PostConstruct
    protected void init() {
        // 这里调用外部服务获取数据，封装成SelectOption列表
        this.options = fetchOptionsFromExternalService();
    }

    public static class SelectOption {
        private String value;
        private String label;
        // 生成getter和setter
    }
}

2. 在对话框的HTL里把Model的数据放到对话框的data属性：

<sly data-sly-use.optionsModel="com.yourproject.models.DynamicOptionsModel">
    <coral-dialog class="my-custom-dialog" data-dynamic-options="${optionsModel.options @ context='unsafe'}">
        <!-- 你的对话框内容 -->
        <coral-select name="./myDynamicSelect"></coral-select>
    </coral-dialog>
</sly>

3. 客户端脚本直接从data属性取数据：

$(document).on('foundation-contentloaded', function(e) {
    const $dialog = $(e.target);
    if ($dialog.hasClass('my-custom-dialog')) {
        const options = JSON.parse($dialog.data('dynamic-options'));
        const selectComponent = $dialog.find('coral-select[name="./myDynamicSelect"]')[0];
        
        options.forEach(opt => {
            const coralOption = new Coral.Select.Item();
            coralOption.value = opt.value;
            coralOption.content = opt.label;
            selectComponent.items.add(coralOption);
        });
    }
});

这种方式完全避免了前端AJAX的问题，性能也更好，适合大多数场景。

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