CODEWITHSUNDEEP
javascriptpolymer-1.0
Jose Raul Perera
Jose Raul Perera

Reputation: 878

Error on-tap event on paper-button polymer element

I have this problem with an element in polymer, I'm trying to show a button and when the button tap event is fired I would like to call a function.

Console Exception:

[my-blogentry::_createEventHandler]: listener method toggle not defined

This the source code for the element:

<dom-module id="my-blogentry">
<template>
    <style>
        :host {
            display: block;
        }
        .div-general{
      </style>
    <div class="div-general">
        <template is="dom-repeat" items="{{entries}}">
            <paper-material elevation="1" animated="true" class="paper-material-presentation">
                <div class="div-date-left">
                    <span>{{item.date}}</span>
                </div>
                <div>
                    <iron-image src$="../../images/{{item.image}}" style="width:128px; height:128px;" sizing="cover"></iron-image>
                    {{item.resume}} 
                    <paper-button id="bt_readmore" on-tap="toggle">Read More</paper-button>
                    <iron-collapse id="collapse">
                      <div>{{item.content}}</div>
                    </iron-collapse>
                </div>
            </paper-material>
        </template>
    </div>
</template>
<script>
    Polymer({
        is: 'my-blogentry',

        ready: function() {
            this.entries = [
                {id: '1', title: ‘xxx.', date: 'Tuesday, March 8, 2016', image:'im-blogdefault.png', resume:’xxx’,content:’xxxx’}
            ];
          }
    });
    toggle = function () {
            this.$.collapse.toggle();
        }
</script>

I will appreciate any help on this.

Upvotes: 2

Views: 799

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657148

You need to move the toggle method inside the Polymer elements code

  Polymer({
    is: 'my-blogentry',

    ready: function() {
        this.entries = [
            {id: '1', title: ‘xxx.', date: 'Tuesday, March 8, 2016', image:'im-blogdefault.png', resume:’xxx’,content:’xxxx’}
        ];
     },
     toggle: function () {
        // this.$.collapse.toggle();
        his.$$('#collapse').toggle();
     }
  });

Upvotes: 1

Related Questions