Объем JavaScript "AbstractJavaScriptComponent" Ваадина

Я интегрировал некоторый код 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);
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
11
0
340
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

Я интегрировал весь JavaScript, включая функцию 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

Другие вопросы по теме