javascript - 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 extends 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