Polymer click event is not fired

At the moment I'm trying my first steps with Polymer. Now I have a simple page with a paper-button on it but I can't register a click event for it. I tried with this code:

<paper-button raisedButton 
              id="test"
              class="colored" 
              label="Click"
              link="http://twitter.com"
              on-click="{{ goLink }}">
</paper-button>

<script>
        Polymer('#test', {
            goLink: function(e) 
            {
                window.location.href = e.target.getAttribute('link');
            }
       });
</script>

The click event is not fired. What is wrong with the code? And second question: Should I use on-click or on-tab in my code?

Solution

You cannot define a Polymer component by simply calling the Polymer() function with the id of some arbitrary element. Either you need to create a Polymer element that contains the button and the handler code like so:

<body unresolved>

  <polymer-element name="link-button">
    <template>
      <paper-button raisedButton id="test" class="colored"
        label="Click" link="http://twitter.com"
        on-click="{{ goLink }}">
      </paper-button>
    </template>
    <script>
      Polymer('link-button', {
        goLink: function(e) {
          window.location.href = e.target.getAttribute('link');
        }
      })
    </script>
  </polymer-element>

  <link-button></link-button>

</body>

or you need to wrap the button in an auto-binding template:

<body unresolved>

  <template id="bind" is="auto-binding">
    <paper-button raisedButton id="test" class="colored"
      label="Click" link="http://twitter.com"
      on-click="{{ goLink }}">
    </paper-button>
  </template>

  <script>
    var bind = document.querySelector('#bind');
    bind.goLink = function(e) {
      window.location.href = e.target.getAttribute('link');
    }
  </script>

</body>

With the first version, you can create a reusable link-button element if you convert the hard-coded link (and maybe some other values) into attributes.

And btw. you can use 'on-tap' or 'on-click'. Both events are fired when you click the button with the mouse.

Edit:

If all you want is the fancy paper button, you could go without any Polymer specific programming by simply adding an event listener to the element:

<paper-button raisedButton id="test" class="colored"
  label="Click" link="http://twitter.com">
</paper-button>

<script>
  document.querySelector('#test').addEventListener('click', function(e) {
    window.location.href = e.target.getAttribute('link');
  })
</script>

But i think you miss a lot of the power of Polymer (and web components in general) if you only focus on the component-consumer-side of it.