Data binding in a dynamically inserted polymer element -

there're times when need adding custom element dynamically context. then:

• the inserted polymer receive properties bound property inside context, can change accordingly.

• at polymer 0.5 use pathobserver binding property context property added component. however, did not find workaround or equivalent @ polymer 1.0.

i have created example 0.5 , same 1.0. see below code of polymer makes injection. can see full plunker examples clarity.

ej 0.5:

<polymer-element name="main-context">   <template>     <one-element foo="{{foo}}"></one-element>     <div id="dynamic">     </div>   </template>   <script>     polymer({       domready: function() {         // injecting component polymer , binding foo via pathobserver         var el = document.createelement("another-element");         el.bind("foo", new pathobserver(this,"foo"));         this.$.dynamic.appendchild(el);       }     });   </script> </polymer-element> 

please, see full plunkr example: http://plnkr.co/edit/2aj3lcgp1t42xo1eq5v6?p=preview

ej 1.0:

<dom-module id="main-context">   <template>     <one-element foo="{{foo}}"></one-element>     <div id="dynamic">     </div>   </template> </dom-module> <script>   polymer({     is: "main-context",     ready: function() {       // injecting component polymer , binding foo via pathobserver       var el = document.createelement("another-element");       // fixme, there's no path observer: el.bind("foo", new pathobserver(this,"foo"));       this.$.dynamic.appendchild(el);     }   }); </script> 

please, see full plunkr example: http://plnkr.co/edit/k463dqeqdunh10aqszhp?p=preview

do know workaround or equivalent polymer 1.0?

right now, there no direct way it. should manually double binding listening changes in foo property of parent element , listening foo-changed event of programmatically created element.

<script>    polymer({   is: "main-context",   properties: {     foo: {       type: string,       observer: 'foochanged'     }   },   ready: function() {     var self = this;     var el = this.$.el = document.createelement("another-element");      //set initial value of child's foo property     el.foo = this.foo;     //listen foo-changed event sync parent's foo property     el.addeventlistener("foo-changed", function(ev){       self.foo = this.foo;     });      this.$.dynamic.appendchild(el);   },   //sync changes in parent's foo property child's foo property   foochanged: function(newvalue) {     if (this.$.el) {       this.$.el.foo = newvalue;     }   } }); </script> 

you can see working example here: http://plnkr.co/edit/mzd7bntvxlqjdj5xsq0o?p=preview