Polymer how to re-render element/template

Question

I'm trying to dynamically add a page to iron-pages , but the element doesn't recognize the dynamically added content. I think this happen during html rendering, but I don't know how to trigger it again. The jsbin below demonstrates what I'm trying to do: http://jsbin.com/nuhone/4/edit?html,console,output . Basically, I have an iron-pages with one existing page. I'm trying to add a second page dynamically, but unable to do so because iron-pages doesn't recognize this newly added div .

Answer 1

Took a look at your code - basically 2 issues.

1. Polymer.domAPI

   When inserting or removing nodes, use it.

2. Race Condition

   iron-pages extends IronSelectableBehavior - ie MutationObservers have already been setup nicely to detect whenever you add/remove pages. However, this takes time to trigger. Wrap your next steps with Polymer.async() to place them at the end of the microtasks queue.

    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); }); }); 

Your jsbin fixed: http://jsbin.com/viqunoxesi/edit?html,console,output

Answer 2

It might help to use the Polymer DOM API like

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