Polymer data binding doesn't work when assigni

问题:

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.

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