Polymer如何重新渲染元素/模板

Question

我正在嘗試動態地將頁面添加到iron-pages ，但該元素無法識別動態添加的內容。 我認為這發生在html渲染過程中，但我不知道如何再次觸發它。 下面的jsbin演示了我正在嘗試做的事情： http ：//jsbin.com/nuhone/4/edit？html，console，output。 基本上，我有一個現有頁面的iron-pages頁。 我正在嘗試動態添加第二頁，但無法這樣做，因為iron-pages無法識別這個新添加的div 。

Answer 1

看看你的代碼 - 基本上是2個問題。

1. Polymer.domAPI

   插入或刪除節點時，請使用它。

2. 比賽條件

   iron-pages擴展了IronSelectableBehavior - 即MutationObservers已經很好地設置，以便在您添加/刪除頁面時進行檢測。 但是，這需要時間來觸發。 使用Polymer.async()包裝您的后續步驟，將它們放在微任務隊列的末尾。

    document.addEventListener("WebComponentsReady", function() { var newDiv = document.createElement("div"); newDiv.innerHTML = "Def"; var ironPage = document.querySelector("iron-pages"); Polymer.dom(ironPage).appendChild(newDiv); Polymer.Base.async(function () { console.log(ironPage.items.length); // shows 2 ironPage.select(1); }); }); 

你的jsbin修復： http ：//jsbin.com/viqunoxesi/edit？html，console，output

Answer 2

使用Polymer DOM API可能會有所幫助

Polymer.dom(document.querySelector("iron-pages"))
  .appendChild(newDiv);