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>
</ul>

      

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) {
     /*reaction*/
}

      

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

+3


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: https://github.com/Polymer/docs/issues/607

Example:



<li id="myli></li>

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

      

+3


source







All Articles