CODEWITHSUNDEEP
javascriptpolymer-2.x
Jose Raul Perera
Jose Raul Perera

Reputation: 878

this.$.element error in dom-repeat

I have the a polymer element with this piece of template: structure Element: <my-tiendas>

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

The element my-tiendaitem is another polymer element that has the features to show the list item:

<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>

In my-tiendaitem I have a functionality that allow me to swipe to the left and show action buttons, to do this i need some event listeners like:

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

I'm getting always an error in the console:

Cannot read property 'addEventListener' of undefined

And that it is because this.$.front is undefined. There is anyway to solve this issue? I'm using Polymer 2 the last release.

Upvotes: 1

Views: 80

Answers (2)

tony19
tony19

Reputation: 138326

The problem seems to be related to your custom addEventListener method masking the element's native addEventListener, which Polymer is trying to call in setting up dom-repeat children. You'll have to rename your addEventListener method (e.g., to _addEventListener).

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

demo

Upvotes: 1

Niklas
Niklas

Reputation: 1299

For locating dynamically-created nodes in your element's use Polymer.dom(this.root).querySelector() or it's shorthand this.$$(selector)

You can read more about it in the Polymer documentation in the section Automatic node finding

Upvotes: 0

Related Questions