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

Question

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

- Nam Thai

---

我认为iron-pages和其他类似的聚合元素实际上无法识别何时向它们添加了新的子元素，我认为你最好在iron-pages中使用dom-repeat，并将新元素推送到其items数组中。 - Alan Dávalos

@Alan，让我试着确认一下它是否有效。听起来是个有前途的想法。 - Nam Thai

Answer 1

我看了一下你的代码，基本上有两个问题。

1. Polymer.domAPI

   When inserting or removing nodes, use it.

2. Race Condition

   iron-pages extends IronSelectableBehavior - ie MutationObservers have already been setup nicely to detect whenever you add/remove pages. However, this takes time to trigger. Wrap your next steps with Polymer.async() to place them at the end of the microtasks queue.

   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

- zerodevx

Answer 2

使用 Polymer DOM API 可能会有所帮助，例如

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

- Günter Zöchbauer

---

我在我的jsbin上尝试了，但无法使其工作 :( - Nam Thai