Vaadin14中Java与JavaScript交互时element.$server未定义问题

核心原因 #

你遇到element.$server未定义的问题，最常见的是以下几个配置/用法错误：

• @ClientCallable标注的方法访问权限错误
  Vaadin要求被@ClientCallable标注的方法必须是public权限，你当前代码中方法是private，客户端无法访问到对应的代理方法，也就不会在元素上挂载$server属性。
• 方法所属类不符合要求
  @ClientCallable只能标注在Vaadin Component子类的方法上，如果你的方法所在类不是Component子类，不会生成客户端代理。
• 调用时机早于Vaadin客户端初始化
  如果点击事件在Vaadin客户端完成元素绑定前触发，$server属性还未挂载到元素上，也会出现未定义报错。

修复步骤 #

第一步：修改Java方法权限 #

将clickBullet方法的访问修饰符从private改为public：

@ClientCallable
public void clickBullet(String area) {
    log.error("Clicked area: " + area);
}

第二步：校验类归属 #

确认上述方法所在的类继承自Vaadin的Component类，自定义组件、View/Layout类都符合要求。

第三步：添加调用时机兼容判断 #

修改JS侧代码，添加$server存在性校验，避免初始化未完成导致的报错：

function clickBullet(name, element) {
    if(element !== null){
        if (element.$server) {
            element.$server.clickBullet(name);
        } else {
            // 延迟重试，直到$server挂载完成
            setTimeout(() => clickBullet(name, element), 100);
        }
    }
    else {
        console.log("element is null");
    }
}

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