Question

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

Answer 1

看看你的代码 - 基本上是2个问题。

<强> Polymer.domAPI

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

种族条件

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

Polymer如何重新渲染元素/模板

2 个答案: