通过id

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

}

Answer 2

您元素中的几乎所有内容都包含在if语句中：

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

而且，正如您在[此处]所读到的，“未添加未使用数据绑定动态创建的节点（包括dom-repeat和 dom-if 模板中的节点）。到 this。$哈希。”

该对象只是一个“快捷方式”，但是您仍然可以查询本地dom以查找该元素。只需使用

this.shadowRoot.getElementById('elementId')

或

this.shadowRoot.querySelector('#elementId')

更新：同样，在您运行initialize时，元素可能尚未标记到页面中。只是检查一下，您可以在一个超时时间内运行呼叫，只是将其延迟几毫秒：

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

我也不知道您在尝试做什么，但是我看到您正在使用一些jQuery小部件。请确保检查它是否与您的设置兼容，因为所有使用文档查询DOM的库。 某些东西确实与shadowDom不兼容。但这超出了这个问题的范围...