我已经通过创建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