Come si ascoltano gli eventi per gli elementi in Polymer 1.0?

Question

Desidero utilizzare gli elementi dell'interfaccia utente di Polymer (ad es. Icone di ferro, pulsante di carta, ecc.) Senza creare elementi o modelli personalizzati.

Per esempio, diciamo che ho:

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

Come faccio ad ascoltare per l'evento 'click'? Semplicemente aggiungendo un listener di eventi a "clic" per l'ID "my-button" non funziona.

Answer 1

Dovrebbe funzionare? Suppongo che tu voglia utilizzare gli elementi dell'interfaccia utente di Polymer nel documento principale (index.html) senza dover creare componenti personalizzati. Supponi di avere

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

in index.html. Via js vaniglia,

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

e via jQuery,

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

p/s: mi piacerebbe scrivere un jsbin veloce come una demo, ma rawgit sembra avere problemi, e io non sono consapevole di CDN alternativi che ospitano Polymer Elements.

Vorrei essere chiaro: gli elementi di polimero e le componenti web di estensione sono progettati per essere indipendenti dal framework e, se opportunamente codificati, funzioneranno da soli, proprio come qualsiasi altro elemento HTML. Si prega di non dom-legare per il bene di dom-binding. È solo farlo se si a) richiede lo zuccheraggio del polimero (come l'associazione dati) nel proprio caso d'uso; e b) si desidera utilizzare lo zuccheraggio di Polymer dal tuo index.html - in caso contrario, non aggiungere ulteriore complessità alla tua app.

Ho trovato un CDN che servono elementi di polimeri, quindi:

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

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

Answer 2

si può provare:

<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(); 
});