Search code examples
htmlpolymerweb-component

Event Handling in Polymer

I have switch.html like this:

<link rel="import" href="/public/components/paper-toggle-button/paper-toggle-button.html">    
<dom-module id="element-name">
  <template>
    <div><paper-toggle-button on-change="{{handleToggle}}"></paper-toggle-button></div>
  </template>
  <script>
    // element registration
    Polymer({
      is: "element-name",
      properties: {
        greeting: {
          type: String,
          value: "Hello!"
        }
      },
      handleToggle: function() {
        alert('Ow!')
      }
    });
  </script>
</dom-module>

version: 1.2.0

How do I catch change event and handle it? I have set on-change property, but it does not work. Next, I need to send json to my server.

Solution

  • You have wrapped handleToggle in curly braces which makes it a binding. Just remove them to tell on-change to call a function:

    <paper-toggle-button on-change="handleToggle"></paper-toggle-button>