Search code examples
javascriptpolymerpolymer-1.0polymer-starter-kit

Where do i put the listener methods for buttons on dom-bind template

I am using polymer starter kit which has some paper-icon-buttons on the paper-toolbar by default. 

<body unresolved class="fullbleed layout vertical">
  <template is="dom-bind" id="app">
  <paper-drawer-panel id="paperDrawerPanel" forceNarrow>
   <paper-header-panel main mode="flex">
    <!-- Main Toolbar -->
    <paper-toolbar id="mainToolbar">

      <!-- Toolbar icons -->
        <paper-icon-button icon="search"></paper-icon-button>
        <paper-icon-button icon="refresh" on-tap='refreshTapped'></paper-icon-button>

      </paper-toolbar>

    </paper-header-panel>
  </paper-drawer-panel>
</template>

<script src="scripts/app.js"></script>

How can I add an on-tap listener on the refresh button? I have tried to add the listener method in scripts/app.js like shown below but still the method cannot be found.

function refreshTapped(){ 
  document.querySelector('#myDialog').toggle();
}

When i click on the button i get this on the browser console:

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

  • Open the "scripts/app.js" file and add your function like this:

    app.refreshTapped = function() {
    console.log('tapped');
  }

    just like the app.onMenuSelect example that is already in there