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

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

• javascript
• html
• dom
• onclick
• polymer-1.0

• I don't know that library, but have you tried using Polyer._addToCart? – Sheerforce Commented Sep 2, 2015 at 16:37
• I already tried that and It didn't work. – user1221612 Commented Sep 2, 2015 at 17:55

3 Answers 3

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.

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>

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