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