Geek Answers Handbook

Polymer Click Event Does Not Trigger

I'm currently trying to take the first steps with Polymer. Now I have a simple page with a paper button, but I can not register the click event for this. 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>

Click event does not fire. What is wrong with the code? And the second question: should I use on-click or on-tab in my code?

+7
javascript polymer
source share
3 answers

You cannot define a Polymer component by simply calling the Polymer() function with the identifier of some arbitrary element. Or you need to create a Polymer element that contains a button and a handler code as follows:

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

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

And by the way. you can use on-tap or on-click. Both events are fired when a button is pressed with the mouse.

Edit:

If all you need is a fantastic papers button, you can go without any specific programming in Polymer 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 that you will miss most Polymers (and web components in general) if you focus only on the consumer component.

+16
source share

I know this is an old thread, but since more people can get here, like me, see below a correct and updated answer compatible with Polymer 1.x (Dirk Grappendorf's answer was quite correct, BUT BROKEN):

To create a Polymer element:

 <dom-module id="module-name"> <style> Enter your CSS style here </style> <template> <paper-button raisedButton id="test" link="http://twitter.com" on-tap="goLink">Click</paper-button> </template> <script> Polymer({ is: 'module-name', goLink: function(e) { window.location.href = e.target.getAttribute('link'); } }); </script> </dom-module>

To create an automatic snap template:

 <template id="bind" is="dom-bind"> <paper-button raisedButton id="test" link="http://twitter.com" on-tap="goLink">Click</paper-button> </template> <script> var bind = document.querySelector('#bind'); bind.goLink = function(e) { window.location.href = e.target.getAttribute('link'); }; </script>

Or using listeners:

 <paper-button raisedButton id="test" link="http://twitter.com">Click</paper-button> <script> var button = document.getElementById('test'); button.addEventListener('tap', function(e) { window.location.href = e.target.getAttribute('link'); }); </script>

Button paper and paper factory work the same way.

What to choose? I would choose to create an item if I am going to reuse this button for more projects or in other parts of the same project; automatic linking if I do not reuse this code, but my interface has many events to process (it is easier to encapsulate the entire user interface in one dom-bind template and create all the handlers needed using the bind.handlerName syntax than to create listeners for all user interface elements that trigger events - and one listener for each event fires the same element). And the thid variant, listeners, only if what I want cannot be executed by other parameters (for example, when user events are triggered), or only 1 or 2 events are triggered on the page (in this case the code seems to be shorter than the other options).

+4
source share

For Polymer 2, you will do the following:

 <dom-bind id='top'> <template> <paper-button raisedButton id="test" link="http://twitter.com" on-tap="goLink">Click</paper-button> </template> </dom-bind> <script> const bind = document.getElementById('top'); bind.goLink = ()=>{ } </script>

Your template is immediately stamped, and all data bindings refer to the dom binding element.

Then you could add two binding methods, etc., for example:

 <dom-bind id='top'> <template> <paper-button raisedButton id="test" link="[[url]]" on-tap="goLink">[[display]]</paper-button> </template> </dom-bind> <script> const bind = document.getElementById('top'); bind.goLink = ()=>{ } bind.url = 'http://twitter.com' bind.display = 'Click' </script>

See https://www.polymer-project.org/2.0/docs/devguide/templates#dom-bind

Or for a quick and dirty solution, you can simply use a global event handler (not a good idea, though ...).

 <paper-button raisedButton id="test" link="http://twitter.com" onclick="goLink()">Click</paper-button> <script> window.goLink = ()=>{} </script>
+1
source share

More articles:


All Articles