polimer 1.0 dom-if şablonunda öğeyi seç

Question

Polimer 1.0 ile ortak bir sorun gibi görünüyor: dom-if şablonunun içindeki düğümlere erişiyorum, ancak önerilen çözümlerin hiçbiri benim durumumda çalışmıyor gibi görünüyor (?!

<link rel="import" href="../../bower_components/polymer/polymer.html"> 

<dom-module id="my-test"> 
    <template> 
    <div> 
     <template is="dom-if" if="{{show}}" id="tplId"> 
     <p id="message">hello</p> 
     </template> 
    </div> 
    <a on-tap="tapEvent">click me!</a> 
    </template> 

    <script> 
    (function() { 
     'use strict'; 
     Polymer({ 
     is: 'my-test', 
     show: false, 
     ready: function() { 
     }, 
     tapEvent: function() { 
      // show the template 
      this.show = true; 

      // How may I access #message since the template is inhert ? 

      // this finds the template by id 
      console.log(Polymer.dom(tplId)); 

      // this won't find the #message element inside it 
      console.log(Polymer.dom(tplId).querySelector('#message')) 

      // this neither 
      console.log(Polymer.dom(this.root).querySelector('#message')) 

      // this neither 
      console.log(Polymer.dom(this).querySelector('#message')) 

      // this neither .. Should I even be using this.shadowRoot in 1.0? 
      console.log(Polymer.dom(this.shadowRoot).querySelector('#message')) 

      // this neither 
      console.log(this.$$('#message')) 

      // this cannot work because #message is not a statically created DOM element 
      console.log(this.$.message) 

     } 
     }); 
    })(); 
    </script> 
</dom-module> 

Ben Polymer yeniyim ve ben çözüm burnumun altında doğru olabilir hissediyorum ..:) .. İşte

basit bir örnek?

Answer 1

bu

 // this neither 
     console.log(this.$$('#message')) 

ise muhtemelen o işe o yok iken elemanı sorgulamak için çalışmaz. showfalse olduğunda, <p id="message"> öğesi hiçbir şekilde mevcut değildir. Bunu gerekirse sonra yerine daha sonra

console.log(this.$.message); 

yanı çalışacak dom-if

<p id="message" hidden$="{{show}}">hello</p> 

kullanmanın hidden bağlanır.