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

问题似乎与您屏蔽元素native addEventListener的自定义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)定位动态创建的节点

您可以在https://www.digitalocean.com/community/tutorials/how-to-serve-flask-applications-with-uwsgi-and-nginx-on-ubuntu-14-04#configure-uwsgi

部分的Polymer文档中阅读更多相关信息

这个.dom-repeat中的$。元素错误

2 个答案: