Polymer data binding doesn't work when assigning markup to innerHTML that contains attribute data binding

Question

What is the simplest way to create data bindings to attributes, 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 bound to with {{foo}} - a 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 "dynamicFoo", created with innerHTML, is not bound to the foo property in any way, although the markup for it exists.

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

There must be a platform utility which makes the parsing/binding, but i can't find it anywhere.

Answer 1

All Polymer elements (for recent 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 should be able to do something like:

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