Vaadin的"AbstractJavaScriptComponent"的JavaScript范围

Question

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

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

我已经尝试创建一个自定义事件,然后onChange()在init()调用函数时调度它,只要我没有在我的Component(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);

Answer 1

我弄清楚问题是什么.

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

我将整个JavaScript(包括init函数)集成为Component.这样我可以从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