JavaScript Vaadin 的范围 "AbstractJavaScriptComponent"

Question

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

如何调用 "connector.js" 中定义的 passInfo() 方法，而不必手动单击 "chessControll.js" 中 "chessControll.JsLabel" 组件的 innerHTML 中定义的 Button。我的目标是传递信息，当 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);

Answer 1

我明白问题出在哪里了。

Java Web 应用程序的体系结构不允许像我在示例中那样进行简单的通信。 Java脚本从客户端调用服务器端 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

JavaScript Vaadin 的范围 "AbstractJavaScriptComponent"

JavaScript Scope of Vaadin's "AbstractJavaScriptComponent"

javascript

java

scope

vaadin