let me try , stub out question
<polymer-element name="my-element">     <template>         <template if="{{show}}">             <my-other-element id="elementwithunexposedinternals"></my-other-element>         </template>     </template>     <script>         polymer({             show: false,             showchanged: function{                 this.$.elementwithunexposedinternals.someproperty = true;             }         });     </script> </polymer-element>   it seems my-other-element not accessible in this.$ line template has not rendered yet.
how can around "order" issue?
cheers
actually, have 2 problems. 1 element isn't rendered yet, , other element never added this.$, populated element's static contents:
https://www.polymer-project.org/0.5/docs/polymer/polymer.html#automatic-node-finding
you can work around second issue adding static container , using queryselector:
<polymer-element name="my-element">   <template>     <div id="container>       <template if="{{show}}">         <my-other-element id="elementwithunexposedinternals"></my-other-element>       </template>     </div>   ...  var el = this.$.container.queryselector('#elementwithunexposedinternals');   as timing. in polymer 0.5, data binding updates take place microtask timing (after current event handler, , before next event processed). you're seeing, changed handler getting called before data bound template has stamped contents.
you should able solve delaying accessing element async. combining these 2 fixes, get:
        showchanged: function(){           this.async(function() {             var myel =        this.$.container.queryselector("#elementwithunexposedinternals");             myel.someprop = true;           });         },   settimeout(function, 0); work, -- need delay single cycle in event loop. async more idiomatic in polymer (plus, invokes callback this bound custom element instance, handy).
working example here: http://jsbin.com/gicado/1/edit?html,output
Comments
Post a Comment