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 to share