dman dman - 4 years ago 122
Javascript Question

Polymer 1.0- bind a event handler without having to make a custom element

I have

<div id="play-button-png" on-click="open-video"></div>
in the index.html. Without making a custom element, how can I make the event listener for it and bind it in a separate file? Similar to Angular's controller, where you can bind a element without having to create a directive.

Answer Source

you would use the 'dom-bind'template (also known as 'auto binding 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>

then add the function to that templates scope

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

edit: sometimes you will need to wait for the template to be bound before manipulating anything. you would then wait for the 'dom-change' event

app.addEventListener('dom-change', function() {
  // auto-binding template is ready.
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download