Vaadin 的 "AbstractJavaScriptComponent"的 JavaScript 范围

Question

我通过创建一个 AbstractJavaScriptComponent 将一些 HTML/JS 代码集成到我的 Vaadin WebApplication 中。该组件几乎按预期工作。

如何调用“connector.js”中定义的 passInfo() 方法，而不必手动单击“chessControll.js”中“chessControll.JsLabel”组件的 innerHTML 中定义的 Button。 .js”。我的目标是在调用 init() 函数的 onChange 事件时传递信息，它位于同一文件“chessControll.js”中，但不是组件的一部分。

我已经尝试创建一个自定义事件，然后在 init() 函数中的 onChange() 被调用时调度它，只要我没有在我的组件(chessControll.js、chessControll.JsLabel)中监听事件。好像只能静态访问。

如何从 init() 函数访问“chessControll.js”中的 chessControll.JsLabel，然后分派(dispatch)按钮点击或监听组件内的事件来实现同样的目的？

connector.js:

com_*myname*_*applicationName*_JsLabel = function() {

         var mycomponent = new chessControll.JsLabel(this.getElement());

         connector = this;

          this.onStateChange = function() {
            mycomponent = this.getState().boolState; 
          };

        mycomponent.click = function() {
            connector.passInfo(true);
        };
};

chessControll.js:

var chessControll = chessControll || {};

chessControll.JsLabel = function (element) {

    element.innerHTML =
        "<input type='button' value='Click'/>"; 

    // Getter and setter for the value property
    this.getValue = function () {
        return element.
            getElementsByTagName("input")[0].value;
    };

    var button = element.getElementsByTagName("input")[0];
    var self = this;



    button.onclick = function () {
        self.click();
    }; 
};

var init = function() {

      var onChange = function() {
        /*Click Button defined in JsLabel Component */
    };

};$(document).ready(init);

Answer 1

我想出了问题所在。

Java Web 应用程序的体系结构不允许像我在示例中那样进行简单的通信。 JavaScript 从客户端调用服务器端 Vaadin 组件。

我将整个 JavaScript 集成为一个组件，包括 init 函数。这样我就可以从 init 函数调用方法，因为服务器端的一切都是已知的。

编辑 chessControll.js :

var chessControll = chessControll || {};

chessControll.JsLabel = function (element) {

    element.innerHTML =
        "<input type='button' value='Click'/>"; 

    // Getter and setter for the value property
    this.getValue = function () {
        return element.
            getElementsByTagName("input")[0].value;
    };

    var button = element.getElementsByTagName("input")[0];
    var self = this;


//deleted bracket here

var init = function() {

      var onChange = function() {
        self.click();
    };

};$(document).ready(init);

} //<-- that Simple