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.
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With