Polymer 1.0- связывает обработчик события, не создавая настраиваемый элемент

Question

У меня есть <div id="play-button-png" on-click="open-video"></div> в index.html. Не создавая настраиваемый элемент, как я могу создать для него прослушиватель событий и связать его в отдельный файл? Подобно контроллеру Angular, где вы можете связать элемент без необходимости создания директивы.

Answer 1

вы бы использовать «Дом-bind'template (также известный как 'авто связывания шаблона') https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-bind

<template is="dom-bind" id="app"> 
    //document body 
    <div id="play-button-png" on-click="openVideo"></div> 
</template> 

затем добавить функцию, что шаблоны прицел

var app = document.querySelector('#app'); 
app.openVideo = function() { 
    // do something when clicked 
}; 

редактировать: иногда вам нужно будет дождаться привязки шаблона, прежде чем что-либо изменить. вы бы тогда ждать 'РОМ изменение' событие

app.addEventListener('dom-change', function() { 
    // auto-binding template is ready. 
}); 

Answer 2

Существует еще один способ объясняется здесь https://www.polymer-project.org/1.0/docs/devguide/events

установка слушателя событий

<dom-module id="x-custom"> 
    <template> 
    <div>I will respond</div> 
    <div>to a tap on</div> 
    <div>any of my children!</div> 
    <div id="special">I am special!</div> 
    </template> 

    <script> 
    Polymer({ 

     is: 'x-custom', 

     listeners: { 
     'tap': 'regularTap', 
     'special.tap': 'specialTap' 
     }, 

     regularTap: function(e) { 
     alert("Thank you for tapping"); 
     }, 

     specialTap: function(e) { 
     alert("It was special tapping"); 
     } 

    }); 
    </script> 
</dom-module> 

Аннотированного события настройка слушателя

<dom-module id="x-custom"> 
    <template> 
    <button on-tap="handleTap">Kick Me</button> 
    </template> 
    <script> 
    Polymer({ 
     is: 'x-custom', 
     handleTap: function() { 
     alert('Ow!'); 
     } 
    }); 
    </script> 
</dom-module>