Question

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

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

我已经尝试创建一个自定义事件，然后在调用onChange()中的init()时分派它，只要我不监听组件内部的事件，它就可以工作（chessControll.js，chessControll.JsLabel）。似乎只能以静态方式进行访问。

如何从init()函数访问“ chessControll.js”中的chessControll.JsLabel，然后调度按钮click或侦听组件内部的事件以实现相同功能？

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

Vaadin的“ AbstractJavaScriptComponent”的JavaScript范围

1 个答案: