Menu
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?
793
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.
162
I know it is an old thread, but because more people can get here, like me, see below the right and updated answer, Polymer 1.x compatible (Dirk Grappendorf's answer was pretty right BUT is OUTDATED):
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 auto-binding 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>
Paper-icon-button and paper-fab work exactly this same way.
What to choose? I would choose create an element if I am going to reuse this button across more projects, or in other parts at the same project; auto-binding if I'm not going to reuse this code but my interface has many events to handle (it is easier to encapsulate the whole UI in one dom-bind template and create all the handlers necessary using bind.handlerName syntax than create listeners to all UI elements that trigger events - and one listener for each event the same element triggers). And the thid option, listeners, only if what I want cannot be accomplished by the other options (like when you fire custom events) or there is just 1 or 2 events to be triggered in the page (in this case, the code seems shorter than the other options).
45
For Polymer 2, you would do this:
<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 are relative to the dom bind element.
Then you could even add 2 way bindings, etc such as:
<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 could simply use a global event handler (not the best idea though...).
<paper-button raisedButton id="test" link="http://twitter.com" onclick="goLink()">Click</paper-button>
<script>
window.goLink = ()=>{}
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
