我刚刚开始尝试使用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。$”。是不正确的选择。关于我设置不正确的任何提示？谢谢！
答案 0 :(得分：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}}));
}
答案 1 :(得分：0)
您元素中的几乎所有内容都包含在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不兼容。但这超出了这个问题的范围...