在Apache Wicket中点击AjaxLink能否无刷新重复添加JavaScript库？

完全可以实现，以下是具体的实现方案和代码调整建议：

核心逻辑 #

借助Wicket的AjaxRequestTarget，在Ajax请求中动态向页面注入JS库资源，并在资源加载完成后调用对应的功能初始化函数，实现无刷新页面的情况下加载库并触发功能。

1. 调整MetaModelPagePanel的资源与脚本处理 #

让面板提供获取所需JS资源和初始化脚本的方法，方便在Ajax请求中调用：

public class MetaModelPagePanel extends Panel {
    // 原有构造方法及业务代码...

    // 返回当前面板依赖的JS库资源引用
    public ResourceReference getRequiredJsLib() {
        // 替换为你的实际JS库资源，比如本地包资源或CDN资源
        return new PackageResourceReference(MetaModelPagePanel.class, "graph-library.js");
    }

    // 返回图表初始化的JS脚本代码
    public String getGraphInitScript() {
        // 假设初始化函数为initGraph，传入面板的标记ID作为目标容器
        return String.format("initGraph('%s');", this.getMarkupId());
    }
}

2. 修改AjaxLink的点击事件处理 #

在点击事件中，完成面板添加、JS库注入和初始化脚本执行的完整流程：

RepeatingView graphTesting1 = new RepeatingView("graphTesting");
OverViewpanel.add(graphTesting1);

AjaxLink<Void> onClickGraph_Container = new AjaxLink<>("onClickGraph_Test") {
    @Override
    public void onClick(AjaxRequestTarget target) {
        MetaModelPagePanel graphTesting = new MetaModelPagePanel(graphTesting1.newChildId(), getRepositoryKey());
        graphTesting1.add(graphTesting);
        
        // 将新面板添加到Ajax目标，更新页面DOM
        target.add(graphTesting);
        
        ResourceReference jsLib = graphTesting.getRequiredJsLib();
        // 避免重复加载同一JS库
        if (!target.getHeaderResponse().wasRendered(jsLib)) {
            // 动态向页面头部注入JS库
            target.getHeaderResponse().renderJavaScriptReference(jsLib);
        }
        
        // 追加初始化脚本，Wicket会确保JS库加载完成后执行该脚本
        target.appendJavaScript(graphTesting.getGraphInitScript());
    }
};

关键注意点 #

• 防止重复加载：通过wasRendered()方法判断JS库是否已加载，避免多次点击导致重复引入相同资源。
• 脚本执行时机：使用appendJavaScript()而非直接渲染脚本，确保JS库加载完成后再执行初始化逻辑，避免出现"函数未定义"的错误。
• 标记ID唯一性：确保面板的标记ID唯一（Wicket默认自动生成唯一ID），让初始化脚本能准确定位到目标DOM元素。

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