템플릿 내부에 노드 가져 오기

Question

내 폴리머 기반 웹 사이트에서 아약스를 통해 데이터를로드한다는 사용자 정의 요소를 만들었습니다. 데이터로드의 현재 상태에 따라 올바른 콘텐츠를 표시하기 위해 일부 <template if="{{}}"> 요소를 만들었습니다. 그것은 뭔가 이런 식으로 같습니다

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

좋은 작품,하지만 난 그것을 얻을하지 않는 <div id="moduleContainer">에 액세스하려고하면 ... 난 그냥 이렇게 많은 게시물을 읽을 수는 있지만 모든 솔루션을하지 않았다. anybode 도움이 될까요? :)

여기 라이브 웹 사이트에 대한 링크입니다 : http://www.test.gruppenstunde.eu/

UPDATE 나는 그것이 hidden? -Attribute를 사용하는 것이 더 쉽습니다 것을 발견

폴리머 조금 더 작업 후 캐주얼 숨기기 콘텐츠. 예 :

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

Answer 1

당신은 $ 접근을 사용하여 (동적으로 생성) <template if="{{..}}"> 또는 <template repeat="{{..}}"> 내 요소에 액세스 할 수 있습니다. querySelector(...)을 사용해야하고 if식이 true로 평가 될 때만 필드를 사용할 수 있습니다 (요소가 실제로 생성/표시됨)

Answer 2

해당 요소에 액세스하려면 해당 템플릿을 div에 넣고 div에 ID를 입력하면됩니다.

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

당신은

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