Vaadin "AbstractJavaScriptComponent"的 JavaScript 范围



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

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

我已经尝试过创建一个自定义事件,然后在调用init()函数中的onChange()时调度它,只要我不监听组件(chessControll.js,chessControl.JsLabel(中的事件,它就会起作用。它似乎只能以静态方式访问。

如何从init()函数访问"chessControll.js"中的chessControl.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);
};
};

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

我发现了问题所在。

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

我集成了整个JavaScript,包括init函数,作为一个组件。通过这种方式,我可以从init函数调用该方法,因为服务器端的一切都是已知的。

已编辑的棋子Control.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

最新更新