javascript - dom-repeat 中的 this.$.element 错误

Question

我有这个模板的聚合物元素: 元素:<my-tiendas>

<template is="dom-repeat" items="{{tiendas}}" as="tienda">
    <my-tiendaitem tienda="{{tienda}}"></my-tiendaitem>
</template>

元素my-tiendaitem是另一个具有显示列表项功能的聚合物元素:

<div class="card-container">
            <div class="back" id="back">
                <paper-icon-button icon="my-icons:mode-edit" id="updBt" class="edit-class"></paper-icon-button>
                <paper-icon-button icon="my-icons:delete" id="delBt" class="delete-class"></paper-icon-button>
                <paper-icon-button icon="my-icons:more-vert" id="moreBt" class="more-class"></paper-icon-button>
            </div>
            <div class="front" id="front">
                <iron-icon icon="my-icons:store" slot="item-icon"></iron-icon>
                <div class="content" id="content">
                    <span class="nombre">{{tienda.tiendaNombre}}</span>
                    <span class="direccion">{{tienda.tiendaAddress}}</span>
                </div>
                <div class="circle"></div>
            </div>
        </div>

在my-tiendaitem我有一个功能，允许我向左滑动并显示操作按钮，为此我需要一些事件监听器，例如:

 ready() {
            super.ready();

            this._front = this.$.front;
            this._back = this.$.back;

            this._updBt = this.$.updBt;
            this._delBt = this.$.delBt;
            this._moreBt = this.$.moreBt;

            this.onStart = this.onStart.bind(this);
            this.onMove = this.onMove.bind(this);
            this.onEnd = this.onEnd.bind(this);
            this.update = this.update.bind(this);

            this.updClick = this.updClick.bind(this);
            this.delClick = this.delClick.bind(this);
            this.moreClick = this.moreClick.bind(this);
            this.updateBecauseOfClick = this.updateBecauseOfClick.bind(this);

            this.target = null;

            this.startX = 0;
            this.currentX = 0;
            this.dragginCard = false;
            this.screenX = 0;
            this.causeClick = false;
            this.addEventListener();

            requestAnimationFrame(this.update);
        }

        addEventListener(){
            this._front.addEventListener('touchstart', this.onStart);
            this._front.addEventListener('touchmove', this.onMove);
            this._front.addEventListener('touchend', this.onEnd);

            this._updBt.addEventListener('click', this.updClick);
            this._delBt.addEventListener('click', this.delClick);
            this._moreBt.addEventListener('click', this.moreClick);
        }

控制台总是报错:

Cannot read property 'addEventListener' of undefined

那是因为 this.$.front未定义。无论如何要解决这个问题？我使用的是最新版本的 Polymer 2。

Answer 1

问题似乎与您的自定义 addEventListener 方法屏蔽了元素的 native addEventListener 有关，Polymer 试图在设置 dom-repeat 子级时调用它。您必须重命名您的 addEventListener 方法(例如，重命名为 _addEventListener)。

class Foo extends Polymer.Element {
  // addEventListener() { // DON'T NAME IT THIS
  _addEventListener() {
    ...
  }
}

demo