ポリマー - 最初の呼び出しでnullを返すDOM-IFの項目

Question

私は、ポリマーの準備と要素がどのように正しく動作するかを理解することに問題があるため、書いています。私はPolymer 2.0を使用しています。

<template is="dom-if" if="{{isExpanded}}"> 
     <div id="drop-down-list" > 
      <template is="dom-repeat" items="{{employees}}"> 
       <button on-click="onDropDownItemClick" class="button-style items">{{item}}</button> 
      </template> 
     </div> 
    </template> 

isExpandendがfalseで起動の場合：私のテンプレートで

私はこのコードを持っています。ボタンは隠されているか、作成されていないのでしょうか？

その後、いくつかの機能では、私はtrueにisExpandendを切り替えて、私はそのようにいくつかのスタイルを更新する：

var items = this.shadowRoot.querySelectorAll('.items'); 
      for(var i=0; i< items.length; i++){ 
       items[i].style.height = itemHeight; 
      } 

問題がある - このソリューションは、この関数の2番目以上のエントリで動作します。 この関数を初めて呼び出すと、アイテムはnullになりますが、何も変更されませんが、2回目以降のアイテムを呼び出すと[=]、コードは正常に動作します。

このバグを修復するにはどうすればよいですか？

"async"と何かする必要がありますが、これはスタック上にありますが、使い方は分かりません。

Answer 1

この問題の解決策を見つけました。 私は、DOM-場合

にすぎテンプレートIDを追加し、これは私が書くコードJS前：

this.$["templateID"].render(); 

をこれが動作しているが、私はそれが良いかわかりませんか？

Answer 2

isExpandedのスイッチをどのように実行しますか？通常は何かが最初にはうまくいかなかったが、後で対話で更新すると、値を間違って変更したことになり、変更について通知するためにsetまたはpush apiを使用する必要があります。

この例でプランナーを作成できると思いますか？