有條件模板

Question

聚合物GET元素我有下面的模板我的聚合物組分中

<polymer-element name="my-element" attributes="show"> 
    <template if={{show}}> 
    <select id="conditional-select"> 
    </select> 
    </template> 
<script> 
Polymer({ 
    showChanged: function() { 
     console.log(this.$['conditional-select']); //undefined 
     setTimeout(function(){ 
      console.log(this.$['conditional-select']); //got it! 
     },1000) 
    } 
}) 
</script> 
</polymer-element> 

爲什麼第一個控制檯輸出始終undefined展出改變？ 我明白了，那個DOM元素還沒有在showChanged內呈現，但是如何正確地等待呢？

Answer 1

看起來像填充this.$需要一點時間，所以按照showChanged工作改變了我

showChanged: function() { 
    this.async(function() { 
     console.log(this.$['conditional-select']); //undefined 
     console.log(this.shadowRoot 
      .querySelector('#conditional-select')); //got it!!     
    }.bind(this)); 
}