Data binding for dynamically generated HTML in Polymer?

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>


I dynamically generated a new element of <li>

the same structure, for example:

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


But when I click on this element, the event handler is not called.

The event handler looks like this:

breadcrumbClick: function(event, detail, sender) {


I have not found any documentation on whether it is possible or not possible to use data binding for dynamically generated content.


source to share

1 answer

This is possible with injectBoundHTML()

. We haven't documented it yet, but you can see the signature and demo of the method here:


<li id="myli></li>

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




All Articles