Polymer data binding does not work when assigning markup to innerHTML, which contains attribute data binding

Question

What is the easiest way to create attribute data bindings in Polymer when working with innerHTML?

This is an example of what I mean - http://jsfiddle.net/ry6og1q9/2/

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

"staticFoo" paper input is data associated with {{foo}} - two-way data binding.

 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); 

But the "dynamicFoo" created using innerHTML has nothing to do with the foo property, although markup exists for it.

I tried to accomplish this with Node.bind () - http://www.polymer-project.org/docs/polymer/node_bind.html but it only binds one path.

There should be a platform utility that does parsing / binding, but I cannot find it anywhere.

Answer 1

All Polymer elements (for latest releases) have this utility method:

 /** * 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) 

so you can do something like:

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