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