Polymer Dart - Can't access elements inside a template element

Question

I'm having trouble accessing the elements that are within <template if = "{{something}}">. I've read some posts published on the web and mainly the solution involves the use of MutationObserver. The problem is i've template elements chained with other template elements. Below's an illustration:

       <template repeat="{{container in containers}}">
        <!-- Tab content -->
        <div id="{{container.secondname}}" class="{{container.secondname}}">
          <template id="firstTemplate" if="{{currentContainer.photos.isEmpty}}">
              (...)
          </template>
          <template id="secondTemplate-{{container.name}}" if="{{currentContainer.photos.isNotEmpty}}">
            <div class="row">
              <div class="col col-xs-12 col-sm-12 col-md-12 col-lg-12">     
                <section class="centerStuff">
                  <template if="{{container.photosToDisplay.length < 1}}">
                    (...)
                  </template>
                  <template if="{{container.photosToDisplay.length > 0}}">
                      <template if="{{isInOverflow}}">
                        <div on-click="{{moveLeft}}" id="thumb-back"></div>
                      </template>    
                      <ul id="nav-{{container.secondname}}" class="navlistHorizontal">
                        <template repeat="{{photo in currentContainer.photosToDisplay}}">  
                          <li> 
                            <div class="mementoSpecialImage">
                              <div class="imageBoard">
                                <img src="{{photo.miniThumbnailToShow.src}}"
                                     class="image img-thumbnail"
                                     title="{{photo.title}}"
                                     on-click="{{showImage}}"
                                     id="{{photo.title}}"
                                     data-id="{{photo.id}}" >
                                </div>
                            </div>

How can i proceed to access the img element?

Thanks for your help.

Do you have tried something? What didn't work? Where did you put the code you used to access the element? — Günter Zöchbauer
Yes @GünterZöchbauer. Using simply $[] doesn't work as expected. And MutationObserver not seem to be a proper solution to this situation because I have more than one repeat template. I was trying to descend the tree of elements but when i reach <template id="secondTemplate-{{container.name}}" if="{{currentContainer.photos.isNotEmpty}}"> there's no children. Still would not be a proper way to solve the problem in my view. Thank you for your help. — Miguel Júlio
That $[] doesn't work with elements inside <template if/repeat> is a know issue, I guess you found the MutationObserver workaround in the discussion about the issue. The querySelector() solution in my answer should work but only when the element is actually shown. When the element is inside an <template if="{{false}}"> there is no way to select the element because it doesn't exist. — Günter Zöchbauer

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2014-08-10T21:41:34

1

votes

var img = this.querySelector('.imageBoard .image img-thumbnail') as ImageElement;

Polymer Dart - Can't access elements inside a template element

1 Answers