在Polymer中动态生成HTML的数据绑定？

Question

当我在<template> - 标签内写下以下内容时，一切正常：

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

我动态生成了一个相同结构的新<li> - 元素，如下所示：

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

但是当我点击这个元素时，事件处理程序不会被调用。

事件处理程序如下所示：

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

我没有找到任何关于动态生成内容是否可能或不可能使用数据绑定的文档。

Answer 1

这可以通过injectBoundHTML()实现。我们尚未对其进行记录，但您可以在此处查看方法签名和演示：https://github.com/Polymer/docs/issues/607

示例：

<li id="myli></li>

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