Добавить прослушиватель событий в Polymer Webcomponent по id

Question

Я только начинаю пытаться использовать веб-компоненты и сталкиваюсь с проблемой, пытаясь добавить прослушиватели событий к элементам в моем пользовательском веб-компоненте.

Мой шаблон выглядит так:

<dom-module id="quadimageview">
    <template>
        <template is="dom-if" if="[[!issingleview]]">
            <div id="gridViewContainer" class="grid-view">
                <div id="topLeftCell" class="grid-cell">
                    <select id="colorTL" class="color-select" value="{{TLColor::change}}">
                        <template is="dom-repeat" items="[[colors]]">
                            <option selected$="[[optionSelected(item.value, TLColor)]]" value="[[item.value]]">[[item.name]]</option>
                        </template>
                    </select>
                    <imageviewer id="gridTLImgViewer"
                                      definedscan="[[TLColor]]"
                                      viewerheight="100%"
                                      viewerposition="none"
                                      zoomcontrol>
                    </imageviewer>
                </div>
                <div id="topRightCell" class="grid-cell">
                    <select id="colorTR" class="color-select" value="{{TRColor::change}}">
                        <template is="dom-repeat" items="[[colors]]">
                            <option selected$="[[optionSelected(item.value, TRColor)]]" value="[[item.value]]">[[item.name]]</option>
                        </template>
                    </select>
                    <imageviewer id="gridTRImgViewer"
                                      definedscan="[[TRColor]]"
                                      viewerheight="100%"
                                      viewerposition="none">
                    </imageviewer>
                </div>

                <div id="bottomLeftCell" class="grid-cell">
                    <select id="colorBL" class="color-select" value="{{BLColor::change}}">
                        <template is="dom-repeat" items="[[colors]]">
                            <option selected$="[[optionSelected(item.value, BLColor)]]" value="[[item.value]]">[[item.name]]</option>
                        </template>
                    </select>
                    <imageviewer id="gridBLImgViewer"
                                      definedscan="[[BLColor]]"
                                      viewerheight="100%"
                                      viewerposition="none">
                    </imageviewer>
                </div>
                <div id="bottomRightCell" class="grid-cell">
                    <select id="colorBR" class="color-select" value="{{BRColor::change}}">
                        <template is="dom-repeat" items="[[colors]]">
                            <option selected$="[[optionSelected(item.value, BRColor)]]" value="[[item.value]]">[[item.name]]</option>
                        </template>
                    </select>
                    <imageviewer id="gridBRImgViewer"
                                      definedscan="[[BRColor]]"
                                      viewerheight="100%"
                                      viewerposition="none">
                    </imageviewer>
                </div>
            </div>
        </template>
    </template>
</dom-module>

И мой сценарий выглядит так:

    <script>
        require("jquery-ui/ui/widgets/resizable");
        require("leaflet.sync");

        class Quadimageview extends Polymer.LightDomElement {

            constructor() {
                super();
                this.loadedViewers;

                this.TLColor = 'EngineeringBlue';
                this.TRColor = 'EngineeringGreen';
                this.BLColor = 'EngineeringYellow';
                this.BRColor = 'EngineeringRed';

                this.colors = [
                    { value: 'EngineeringBlue', name: 'FL-Blue' },
                    { value: 'EngineeringGreen', name: 'FL-Green' },
                    { value: 'EngineeringRed', name: 'FL-Red' },
                    { value: 'EngineeringYellow', name: 'FL-Yellow' },
                    { value: 'EngineeringBfBlue', name: 'BF-Blue' },
                    { value: 'EngineeringBfGreen', name: 'BF-Green' },
                    { value: 'EngineeringBfRed', name: 'BF-Red' },
                ];
            }

            static get is() { return 'quadimageview'; }

            static get properties() {
                return {
                    issingleview: {
                        type: Boolean,
                        value: false
                    }
                }
            } 

            ready() {
                super.ready();
                this.initialize();
            }

            optionSelected(value, match) {
                return value == match;
            }

            setupSync(viewer) {                
                console.log(this.loadedViewers);

                if (this.loadedViewers) {
                    this.loadedViewers.forEach(function (element) {
                        if (element.map && viewer.map) {
                            element.map.sync(viewer.map);
                            viewer.map.sync(element.map);
                        }
                    });

                    this.loadedViewers.push(viewer);
                }
                else {
                    this.loadedViewers = [ viewer ];
                }
            }

            initialize() {
                console.log('> Init TL...');
                this.$.gridTLImgViewer.addEventListener('ImageViewerLoaded', function () { this.setupSync(this.$.gridTLImgViewer); }.bind(this));

                console.log('>> Init TR...');
                this.$.gridTRImgViewer.addEventListener('ImageViewerLoaded', function () { this.setupSync(this.$.gridTRImgViewer); }.bind(this));

                console.log('>>> Init BL...');
                this.$.gridBLImgViewer.addEventListener('ImageViewerLoaded', function () { this.setupSync(this.$.gridBLImgViewer); }.bind(this));

                console.log('>>>> Init BR...');
                this.$.gridBRImgViewer.addEventListener('ImageViewerLoaded', function () { this.setupSync(this.$.gridBRImgViewer); }.bind(this));
            }
        }

        window.customElements.define(Quadimageview.is, Quadimageview);
    </script>

И мой компонент разбивается на 'addEventListener' с ошибкой, в которой говорится, что "Невозможно добавить свойство" addEventListener "из неопределенного. Так что похоже на «это. $.» не правильный звонок. Любые намеки на то, что я настраиваю неправильно? Спасибо!

Answer 1

Как я прокомментировал выше, вам нужно изменить пунктирную черту имени настраиваемых компонентов после того, как есть два способа добавить прослушиватель событий. Один находится внутри компонента, как показано ниже. Или this.addEventListener('image-viewer-loaded',this._ImageViewerLoaded), определенный при прикрепленной или готовой функции. Таким образом, ниже, если элемент отображается, его события определены как показано ниже.

<image-viewer id='gridBLImgViewer'
               definedscan='[[BLColor]]'
               viewerheight="100%"
               viewerposition='none'
               on-image-viewer-loaded='_ImageViewerLoaded'>
</image-viewer>


.....

_ImageViewerLoaded() {
   //Your code here
}

в ваших image-viewer компонентах вам нужно будет назначить функцию для загружаемого изображения. Затем добавьте пользовательское событие, чтобы инициировать событие у его родителя.

_ImageViewerLoaded(){
      this.dispatchEvent(new CustomEvent('image-viewer-loaded', {detail: { option}}));

}

Answer 2

Почти все в вашем элементе заключено в оператор if:

<template is="dom-if" if="[[!issingleview]]">

И, как вы можете прочитать [здесь], "Узлы, созданные динамически с использованием привязки данных (включая узлы в шаблонах dom-repeat и dom-if ), не добавлены к this. $ Hash . "

Этот объект является просто «ярлыком», но вы все равно можете запросить локальный домен, чтобы найти элемент. Просто используйте что-то вроде

this.shadowRoot.getElementById('elementId')

или

this.shadowRoot.querySelector('#elementId')

Обновление : также, в тот момент, когда вы запускаете initialize, возможно, элементы еще не добавлены на страницу. Просто чтобы проверить, вы можете запустить вызов в тайм-аут, просто чтобы задержать его на несколько миллисекунд:

  ready() {
    super.ready();
    setTimeout(() => {
      this.initialize();
    });
  }

Также я не знаю, что вы пытаетесь делать там, но я вижу, что вы используете какой-то виджет jQuery. Обязательно проверьте, работает ли он с вашими настройками, потому что все библиотеки, которые запрашивают DOM с помощью документа. что-то , на самом деле не совместимы с shadowDom. Но это выходит за рамки этого вопроса ...