[dom-bind::_createEventHandler]: listener method not defined

Question

I am trying out polymer, but am having a problem in registering methods and calling them, I tried everything on the internet and nothing seems to work, I spent too many hours on this but with no results, please help me

here is my code:

<dom-module id="products-list">
<template>
<template is="dom-bind">
   <iron-ajax id="ajax" auto
       handle-as="json"
       last-response="{{ajaxResponse}}"></iron-ajax>
   <div class="main">
     <template is="dom-repeat" items="[[ajaxResponse.dataResult]]">
       <paper-card heading="[[item.name]]" image="[[item.image]]" class="pb16 w100 flex layout horizontal">
            <div class="card-content">[[item.desc]]</div>
            <div class="card-actions">
                <paper-item>
                    <strong>[[item.price]]</strong>
                    <div class="flex"></div>
                    <paper-button on-click="_addToCart" raised><iron-icon icon="icons:add-shopping-cart"></iron-icon>Add to cart</paper-button>
                </paper-item>
            </div>
       </paper-card>
     </template>
 </div>
</template>
</template>
 <script>
    Polymer({
        is: "products-list",
        ready: function() {
            var baseUrl = getBaseURL();
            var token = getAccessToken();
            var namespace = getNamespace();
            var appKey = getAppKey();
            var appSecret = getAppSecret();
            var url = baseUrl + '/stream/product.json';
            var params = {
                'page' : 0,
                'size' : 25
            };
            var headers = {
                'X-Auth-Token' : token,
                'X-NAME-SPACE' : namespace,
                'X-APP-KEY' : appKey,
                'X-APP-SECRET' : appSecret,
            };
            var ajax = document.querySelector("#ajax");
            ajax.url = url;
            ajax.headers = headers;
        },
        properties: {

        },
        _addToCart: function (e) {
            console.log('You pressed button ' + e.model.item.name);
        }
    });
 </script>

Everything works fine except for clicking the button, I am getting the following error:

[dom-bind::_createEventHandler]: listener method `_addToCart` not defined

Prevost

I don't know that library, but have you tried using Polyer._addToCart? – Rooky

I already tried that and It didn't work. – Prevost

Answer 1

Removing the wrapping dom-bind everything will work fine.

<template is="dom-bind">...</template>

dom-bind is not needed in element definitions. It is intended to be used in normal HTML pages, and it starts a new "bind context" for your elements. This is why it doesn't find the method, because it's trying to find the event handler method outside the element definition.

Coverture

This was my problem too. After removing the dom-bind from inside the element everything worked. Thanks! – Protoplasm

Nice to hear. Vote up. Cheers! – Coverture

Answer 2

I think you've already solved your problem, so for the others you just replace on-click by on-tap event like this:

<paper-button on-tap="_addToCart">...</paper-button>

Delenadeleon

Answer 3

<paper-button id="addToCart" raised>
    <iron-icon icon="icons:add-shopping-cart"></iron-icon>
    Add to cart
</paper-button>

and on ready:

this.$.addtoCart.addEventListener('click',this._addToCart.bind(this))

Deprivation