Polymer Dart - 无法访问模板元素内的元素答案

【问题标题】：Polymer Dart - Can't access elements inside a template elementPolymer Dart - 无法访问模板元素内的元素
【发布时间】：2014-08-10 20:12:18
【问题描述】：

我无法访问<template if = "{{something}}"> 中的元素。我已经阅读了一些在网上发布的帖子，主要解决方案涉及使用MutationObserver。问题是我将模板元素与其他模板元素链接在一起。下面是一个插图：

       <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>

如何继续访问img 元素？

感谢您的帮助。

【问题讨论】：

你有没有尝试过？什么没用？你把用来访问元素的代码放在哪里了？
是的@GünterZöchbauer。简单地使用 $[] 不能按预期工作。而 MutationObserver 似乎不是解决这种情况的合适方法，因为我有多个重复模板。我试图下降元素树，但是当我到达
$[] 不适用于<template if/repeat> 中的元素是一个已知问题，我猜您在有关该问题的讨论中找到了MutationObserver 解决方法。我的答案中的querySelector() 解决方案应该有效，但只有在实际显示元素时才有效。当元素在 <template if="{{false}}"> 中时，无法选择该元素，因为它不存在。

标签： dart dart-polymer

【解决方案1】：

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

【讨论】：

通过为元素分配特定的 CSS 类或 id。仅返回选择器匹配的那些元素。