<template> initialization event with polymer.js

Question

Using Polymer I can use the <template>-tag outside of a <polymer-element> using the is='auto-binding' attribute. How can I know in Javascript however that the <template> has actually been initialized. I have tried listening for every possible event I could think of and browsed the source code as well for a bit, but can't seem to find any pointers anywhere although I assume this must be possible.

If what I mean is hard to comprehend a simple jsfiddle showing the issue can be found here, though I think the description above should suffice.

Answer 1

You want to listen for the template-bound event. It's mentioned at the bottom of this section.

<template is="auto-binding" id="tmpl">
  <input value="{{test}}">
  {{test}}
</template>

<script>
  var tmpl = document.querySelector('#tmpl');
  tmpl.test = 123;
  tmpl.addEventListener('template-bound', function() {
    console.log('template bound fired!');
    console.log(document.querySelector('input'));
  });
</script>

I shot a screencast on auto-binding templates which covers this a bit more.