[英]Polymer how to re-render element/template
I'm trying to dynamically add a page to iron-pages
, but the element doesn't recognize the dynamically added content. 我正在尝试动态地将页面添加到iron-pages
,但该元素无法识别动态添加的内容。 I think this happen during html rendering, but I don't know how to trigger it again. 我认为这发生在html渲染过程中,但我不知道如何再次触发它。 The jsbin below demonstrates what I'm trying to do: http://jsbin.com/nuhone/4/edit?html,console,output . 下面的jsbin演示了我正在尝试做的事情: http ://jsbin.com/nuhone/4/edit?html,console,output。 Basically, I have an iron-pages
with one existing page. 基本上,我有一个现有页面的iron-pages
页。 I'm trying to add a second page dynamically, but unable to do so because iron-pages
doesn't recognize this newly added div
. 我正在尝试动态添加第二页,但无法这样做,因为iron-pages
无法识别这个新添加的div
。
Took a look at your code - basically 2 issues. 看看你的代码 - 基本上是2个问题。
Polymer.domAPI Polymer.domAPI
When inserting or removing nodes, use it. 插入或删除节点时,请使用它。
Race Condition 比赛条件
iron-pages
extends IronSelectableBehavior
- ie MutationObservers have already been setup nicely to detect whenever you add/remove pages. iron-pages
扩展了IronSelectableBehavior
- 即MutationObservers已经很好地设置,以便在您添加/删除页面时进行检测。 However, this takes time to trigger. 但是,这需要时间来触发。 Wrap your next steps with Polymer.async()
to place them at the end of the microtasks queue. 使用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); }); });
Your jsbin fixed: http://jsbin.com/viqunoxesi/edit?html,console,output 你的jsbin修复: http ://jsbin.com/viqunoxesi/edit?html,console,output
It might help to use the Polymer DOM API like 使用Polymer DOM API可能会有所帮助
Polymer.dom(document.querySelector("iron-pages"))
.appendChild(newDiv);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.