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