Wie höre ich Ereignisse für Elemente in Polymer 1.0?

Question

Ich möchte die UI-Elemente von Polymer verwenden (z. B. Eisen-Symbole, Papier-Schaltfläche usw.), ohne benutzerdefinierte Elemente oder Vorlagen zu erstellen.

Zum Beispiel lassen Sie uns sagen, ich habe:

<paper-button id="my-button">Click me</paper-button> 

Wie höre ich für das Ereignis ‚Klick‘? Das Hinzufügen eines Ereignis-Listeners zum "Klicken" für die ID "Meine-Schaltfläche" funktioniert nicht.

Answer 1

Es sollte einfach funktionieren? Ich gehe davon aus, dass Sie die Benutzeroberflächenelemente von Polymer im Hauptdokument (index.html) verwenden möchten, ohne benutzerdefinierte Komponenten erstellen zu müssen. Angenommen, Sie haben

<paper-button id="btn">Click me</paper-button> 

in index.html. Via Vanille js,

document.querySelector("#btn").addEventListener("click", function (e) {...}); 

und über jQuery,

$("#btn").on("click", function (e, u) {...}); 

p/s: Ich habe eine schnelle jsbin als Demo schreiben würde, aber rawgit scheint Probleme zu haben, und ich bin nicht Kenntnis von alternativen CDNs, die Polymerelemente beherbergen.

Lassen Sie mich eines klarstellen: Polymerelemente, und durch Erweiterung Web-Komponenten, sind so konzipiert, dass sie Framework-agnostisch sind und, wenn sie richtig codiert sind, funktionieren wie jedes andere HTML-Element. Bitte dom-bind nicht wegen dom-binding. Sie nur tun Sie dies, wenn Sie a) erfordern Polymer Sugaring (wie Datenbindung) in Ihrem Anwendungsfall; und b) Sie möchten Polymer Sugaring von Ihrem index.html verwenden - wenn Sie dies nicht tun, fügen Sie bitte keine zusätzliche Komplexität zu Ihrer App hinzu.

Ich habe ein CDN dienen Polymerelemente gefunden, so:

Look, no dom-bind and elements are working with vanilla js.

Look, no dom-bind and elements are working with jQuery.

Answer 2

Sie können versuchen:

<template is="dom-bind" id="t"> 
 
<paper-button id="my-button" on-click="buttonClicked">Click me</paper-button> 
 
</template> 
 

 
<script> 
 
var template = document.querySelector('#t'); 
 
template.buttonClicked= function() { 
 
\t \t \t \t alert("he clicked me :)"); 
 

 
\t \t \t }; 
 
</script>

Answer 3

$("body").delegate("#my-button", "click", function() { 
    alert(); 
});