Polymer 1.0 Wählen Sie Element in Dom-If-Vorlage

Question

Ich habe, was ein häufiges Problem mit Polymer 1.0 scheint: Zugriff auf Knoten innerhalb einer Dom-If-Vorlage, aber keine der vorgeschlagenen Lösungen scheinen in meinem Fall zu funktionieren (?!) ..

Hier ist ein einfaches Beispiel:

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

ich Polymer bin neu, und ich fühle mich die Lösung unter der Nase richtig sein könnte ..?

Answer 1

Wenn dieser

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

nicht funktioniert, dann versuchen Sie wahrscheinlich das Element abfragen, während sie noch nicht existiert. Wenn showfalse ist, existiert das <p id="message"> Element überhaupt nicht. Wenn Sie diese dann müssen binden hidden statt mit dom-if

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

dann

console.log(this.$.message); 

auch funktionieren wird.