Vaadin $server 未定义

Question

我尝试使用 Vaadin 24 从 javascript 调用 java 函数。

我读了这篇博文： https://vaadin.com/blog/calling-java-from-javascript

在那里，提到我可以获取元素上的 $server 引用。但对于我尝试的每个元素，我都会收到错误消息 element.$server is undefined。

我还阅读了https://vaadin.com/docs/latest/create-ui/element-api/client-server-rpc，据说我可以使用this.$server，但它不起作用任何一个。 $server 仍未定义。

是否有一种特殊的元素提供 $server 属性？

Answer 1

在 Vaadin 24 及更高版本中，$server 属性用于从客户端（JavaScript）调用服务器端方法。此属性是为作为连接的客户端模板一部分的组件自动生成的。

确保您使用的是基于 Polymer 的组件，并且您的元素确实是连接的客户端模板的一部分。这是一个简单的例子：

@Tag("my-element")
@HtmlImport("frontend://src/my-element.html")
public class MyElement extends PolymerTemplate<TemplateModel> {
    // Server-side method that can be called from the client-side
    public void sayHelloFromServer(String name) {
        System.out.println("Hello from server, " + name + "!");
    }
}

在对应的my-element.html文件中：

<dom-module id="my-element">
    <template>
        <div>My Element</div>
    </template>
    <script>
        class MyElement extends Polymer.Element {
            static get is() { return 'my-element'; }

            // Client-side method that can be called from the server-side
            sayHelloFromClient(name) {
                console.log("Hello from client, " + name + "!");
                // Calling the server-side method
                this.$server.sayHelloFromServer(name);
            }
        }
        customElements.define(MyElement.is, MyElement);
    </script>
</dom-module>

确保验证您的组件是否遵循基于 Polymer 的结构，并且 $server 属性应该自动可用。

如果问题仍然存在，请考虑检查正在使用的组件库的具体文档，因为方法可能会有所不同。