CODEWITHSUNDEEP
javascripthtmlpolymer
Jokus
Jokus

Reputation: 473

Get node inside template if statement

On my polymer-based website I created a custom element in that I am loading data via ajax. Depending on the current state of data-loading i created some <template if="{{}}"> elements to display the right content. It looks something this 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 is 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, but if I try to access the <div id="moduleContainer"> I don't get it... I just read so many posts but did not get any solution. May anybode help me? :)

Here is the link to the live website: http://www.test.gruppenstunde.eu/

UPDATE

After working a little longer with polymer I found out, that it's easier to use the hidden?-Attribute, to casual hide content. Example:

<div hidden?="{{moduleID != null}}">Module not available</div>

Upvotes: 0

Views: 142

Answers (2)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657288

You can't access elements within <template if="{{..}}"> or <template repeat="{{..}}"> (dynamically created) using the $ accessor. You need to use querySelector(...) and you can the field only when the if expression evaluates to true (the element is actually created/shown)

Upvotes: 1

jimi dough10
jimi dough10

Reputation: 2016

to get access to that element you can put that template in a div and give the div a id. 

<div id="mod">
  <template if="{{moduleID != null && module != null}}">
    <div id="moduleContainer">
    <!-- Content //-->
    </div>
  <template>
</div>

then you can 

var el = this.$.mod.querySelector("#moduleContainer");

Upvotes: 0

Related Questions