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

我总是在控制台中遇到错误：

无法读取未定义的属性“addEventListener”

这是因为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

Answer 2

要在元素中定位动态创建的节点，请使用 Polymer.dom(this.root).querySelector() 或简写 this.$$(selector)

您可以在 Automatic node finding 部分的 Polymer 文档中阅读更多相关信息