Reputation: 11
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.
Upvotes: 0
Views: 263
Reputation: 658057
var img = this.querySelector('.imageBoard .image img-thumbnail') as ImageElement;
Upvotes: 1