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