JavaScript Область Ваадина "AbstractJavaScriptComponent" - PullRequest
Новая
       9

JavaScript Область Ваадина "AbstractJavaScriptComponent"

0 голосов
/ 11 декабря 2018

Я интегрировал некоторый код HTML / JS в мое веб-приложение Vaadin, создав компонент AbstractJavaScriptComponent.Компонент почти работает как задумано.

Как вызвать метод passInfo(), определенный в файле "connector.js", без необходимости вручную нажимать кнопку, определенную в innerHTML компонента "chessControll.JsLabel" в"chessControll.js".Моя цель - передать информацию, когда вызывается событие onChange функции init(), которое находится в том же файле "chessControll.js", но не является частью компонента.

Я уже пробовалчтобы создать пользовательское событие и затем отправлять его всякий раз, когда вызывается onChange() в функции init(), оно работало до тех пор, пока я не прослушивал событие внутри моего компонента (chessControll.js, chessControll.JsLabel).Кажется, к нему можно получить доступ только статическим способом.

Как получить доступ к chessControll.JsLabel в "chessControll.js" из функции init(), а затем отправить щелчок кнопкой или прослушать события внутрикомпонент для достижения того же?

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

1 Ответ

0 голосов
/ 15 декабря 2018

Я понял, в чем проблема.

Архитектура веб-приложений Java не допускает простого взаимодействия, как я делал в моем примере.JavaScript сделал вызов со стороны клиента компоненту Vaadin на стороне сервера.

Я интегрировал весь JavaScript, включая функцию init, в качестве компонента.Таким образом, я могу вызвать метод из функции init, потому что все известно на стороне сервера.

edited 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
...