javascript - 通过 id 向 Polymer Webcomponent 添加事件监听器

Question

我刚开始尝试使用 Web 组件，但在尝试向自定义 Web 组件中的元素添加事件监听器时遇到了问题。

我的模板是这样的:

<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”。所以它看起来像'this.$.'不是正确的选择。关于我设置不正确的任何提示？谢谢!

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

}