javascript - Get node inside template if statement -
on polymer-based website created custom element in loading data via ajax. depending on current state of data-loading created <template if="{{}}"> elements display right content. looks way:
<polymer-element name="modules-item" attributes="moduleid categories"> <template > <service-get-module module="{{module}}" moduleid="{{moduleid}}"></service-get-module> <paper-shadow z="1"> <core-toolbar> <span flex hero-id="title" hero itemprop="name">{{module.title}}</span> </core-toolbar> </paper-shadow> <paper-progress id="moduleloadingprogress"></paper-progress> <template if="{{moduleid == null}}"> <p>modul not available</p> </template> <template if="{{moduleid != null && module == null}}"> <p>module loading...</p> </template> <template if="{{moduleid != null && module != null}}"> <div id="modulecontainer"> <!-- content //--> </div> <template> </template> <script> polymer({ module: null, moduleid: null, ready: function(){ console.log(this.$.modulecontainer); } </script> </polymer-element> that works great, if try access <div id="modulecontainer"> don't it... read many posts did not solution. may anybode me? :)
here link live website: http://www.test.gruppenstunde.eu/
update
after working little longer polymer found out, it's easier use hidden?-attribute, casual hide content. example:
<div hidden?="{{moduleid != null}}">module not available</div>
you can't access elements within <template if="{{..}}"> or <template repeat="{{..}}"> (dynamically created) using $ accessor. need use queryselector(...) , can field when if expression evaluates true (the element created/shown)
Comments
Post a Comment