聚合物如何重新渲染 element/template

Question

我正在尝试向 iron-pages 动态添加页面，但该元素无法识别动态添加的内容。我认为这发生在 html 渲染期间，但我不知道如何再次触发它。下面的 jsbin 演示了我正在尝试做的事情：http://jsbin.com/nuhone/4/edit?html,console,output。基本上，我有一个 iron-pages 和一个现有页面。我正在尝试动态添加第二页，但无法这样做，因为 iron-pages 无法识别这个新添加的 div.

Answer 1

像

这样使用聚合物 DOM API 可能会有所帮助

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

Answer 2

查看了您的代码 - 基本上是 2 个问题。

Polymer.domAPI

插入或删除节点时，使用它。

竞争条件

iron-pages extends IronSelectableBehavior - 即 MutationObservers 已经设置得很好，可以在您 add/remove 页面时进行检测。但是，这需要时间来触发。用 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

聚合物如何重新渲染 element/template

Polymer how to re-render element/template

javascript

polymer

polymer-1.0