Data binding for dynamically generated HTML in Polymer?

Question

When I write the following inside my <template>-tag, everything works fine:

<ul id="breadcrumbList" class="breadcrumb">
    <li><a on-click="{{breadcrumbClick}}">{{overviewName}}</a></li>
</ul>

I dynamically generated a new <li>-element of the same structure, like this:

crumb = document.createElement("li");
crumb.innerHTML = '<a on-click="{{breadcrumbClick}}">'+category+'</a>';

But when I click this element, the event-handler isn't called.

The event-handler looks like this:

breadcrumbClick: function(event, detail, sender) {
     /*reaction*/
}

I did not find any documentation about whether it's possible or impossible to use data binding for dynamically generated content.

Answer 1

This is possible with injectBoundHTML(). We haven't documented it yet, but you can see the method signature and demo here: https://github.com/Polymer/docs/issues/607

Example:

<li id="myli></li>

this.injectBoundHTML('<a on-click="{{breadcrumbClick}}">...</a>', this.$.myli);