Vaadin的“AbstractJavaScriptComponent”的JavaScript作用域

Question

我通过创建一个AbstractJavaScriptComponent将一些HTML/JS代码集成到了我的Vaadin WebApplication中。该组件的基本功能已经实现。

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

我已经尝试创建自定义事件并在init()函数中的 onChange()被调用时分派它，只要我没有在我的组件（chessControll.js，chessControll.JsLabel）内部侦听该事件，它就能正常工作。看来它只能以静态方式访问。

如何从init()函数中访问“chessControll.js”中的chessControll.JsLabel，然后分派按钮单击或在组件内部侦听事件以实现相同的效果？

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);

- M.Dan

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

- M.Dan