data-binding - 将标记分配给包含属性数据绑定(bind)的 innerHTML 时， polymer 数据绑定(bind)不起作用

Question

在使用innerHTML 时，在Polymer 中创建与属性的数据绑定(bind)的最简单方法是什么？

这是我的意思的一个例子 - http://jsfiddle.net/ry6og1q9/2/

<paper-input inputValue="{{foo}}" label="static foo"></paper-input>

“staticFoo”纸张输入是与 {{foo}} 绑定(bind)的数据 - 一种双向数据绑定(bind)。

var c = this.$.dynamicFooPlaceHolder;
c.innerHTML = '';
var e = document.createElement('div');
e.innerHTML = '<paper-input id="dynamicFoo" inputValue="{{foo}}" label="dynamic foo"></paper-input>';
c.appendChild(e);

但是，使用 innerHTML 创建的“dynamicFoo”不会以任何方式绑定(bind)到 foo 属性，尽管它的标记存在。

我试图用 Node.bind() 来完成这个
- http://www.polymer-project.org/docs/polymer/node_bind.html
但它只绑定(bind)一种方式。

必须有一个平台实用程序可以进行解析/绑定(bind)，但我在任何地方都找不到它。

Answer 1

所有 Polymer 元素(对于最新版本)都具有此实用程序方法:

/**
 * Inject HTML which contains markup bound to this element into
 * a target element (replacing target element content).
 * @param String html to inject
 * @param Element target element
 */
injectBoundHTML: function(html, element)

所以你应该能够做类似的事情:

this.injectBoundHTML('<paper-input id="dynamicFoo" inputValue="{{foo}}" label="dynamic foo"></paper-input>', 
  this.$.dynamicFooPlaceHolder);