Vaadin 将 JavaScript 流转至 Java 调用

按照本教程进行操作https://vaadin.com/blog/calling-java-from-javascript https://vaadin.com/blog/calling-java-from-javascript我试图从 javascript 调用 Java 函数，但这似乎没有按预期工作。

我有一个包含一个按钮的视图，该按钮在其 onClick 处理程序上触发对 Javascript 函数的调用，该函数按预期工作。

我遇到的问题是，当我传递给 javascript 函数的 getElement() 到达 javascript 端时，它是未定义的。

我的代码如下所示：

@JavaScript("./js/script.js")
public class RouteGraphicsView extends Div {
....
        Button b = new Button("Test Button");
        b.addClickListener(new ComponentEventListener<ClickEvent<Button>>() {

            private static final long serialVersionUID = 1L;

            @Override
            public void onComponentEvent(final ClickEvent<Button> event) {
                UI.getCurrent().getPage().executeJs("greet($0, $1)", "test name", UI.getCurrent().getElement());
            }
        });
....
}

上面的调用到达 script.js 文件，如下所示

window.greet = function greet(name, element) {
    console.log("Hello, I am greeting you, " + name);
    
    try {
        console.log("Element ", element);
        console.log("Logging 1", element.$server);
    } catch (e) {
        console.log(e);
    }
}

上面的greet函数显示的输出是

Hello, I am greeting you, test name
vaadin-bundle-62ac8b…b56c6.cache.js:4813 Element  
vaadin-bundle-62ac8b…b56c6.cache.js:4813 Logging 1 undefined

由于 element.$server 未定义，我无法获取 javascript 函数来调用视图中的greet 函数，该函数注释为@ClientCallable

@ClientCallable
public void greet(final String name) {
    System.out.println("Called from JavaScript: " + name + " \n\n\n");
}

我尝试了调用 script.js 的各种其他方法，例如使用按钮的元素调用executeJs 函数或将按钮的元素（b.getElement()）作为参数传递给函数，但无济于事。

我究竟做错了什么 ？

你正在做的element.$server在您传递的元素上UI.getCurrent().getElement()。这对应于 UI 实例而不是RouteGraphicsView（我假设）有的类@ClientCallable方法。出于同样的原因，使用该按钮也不起作用。

您应该传递视图的实例，在您的情况下需要将其写为RouteGraphicsView.this因为常规的方式this指点击监听器。