聚合物重复元素含量 [英] polymer duplicate element content
问题描述
我想创建显示其内容的自定义元素，如果轻按内容，它将显示在纸张对话框中.我有:
I want to create custom element that displays its content, if content is tapped it will be displayed in paper-dialog. I have:
<paper-element name="my-element">
<template>
<div vertical layout center on-tap="{{contentClicked}}">
<content></content>
</div>
<paper-dialog id="dialog">
<content></content>
</paper-dialog>
</template>
<script>
Polymer({
contentClicked: function(){
this.$.dialog.toggle();
}
});
</script>
</paper-element>
仅将内容添加到第一格，而不添加到纸张对话框.有一些简单的方法可以将内容从div复制到对话框吗?
Content is added only to first div, not to paper-dialog. Is there some easy way to duplicate content from div to dialog?
推荐答案
如在堆栈溢出的其他地方所述，您不会<content>插入点将轻型DOM插入元素.您还可以使用this.children从JavaScript访问轻型DOM节点.
As mentioned in this elsewhere on Stack Overflow, you don't have to use the <content> insertion point to pull in the light DOM into your element. You could also use this.children to access the light DOM nodes from JavaScript.
执行此操作可能更简单，但是仅遍历所有子项，克隆节点并多次附加它们确实可以工作.要注意的一件事是，由于您要向元素中添加原始轻型DOM节点的克隆，因此在页面生命周期内对轻型DOM所做的任何更改都不会反映在这些副本中，因为每个副本可能会不同步.
There might be a simpler way of doing this, but just looping through all the children, cloning the nodes, and appending them multiple times does work. One thing to be aware of is that since you're adding clones of the original light DOM nodes to your element, any changes made to the light DOM during the lifetime of your page won't be reflected in those copies—each copy might get out of sync.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Demo</title>
</head>
<body>
<script src="//www.polymer-project.org/webcomponents.min.js"></script>
<link rel="import" href="//www.polymer-project.org/components/paper-dialog/paper-dialog.html">
<polymer-element name="sample-element">
<template>
<div id="container" on-tap="{{contentClicked}}"></div>
<paper-dialog id="dialog"></paper-dialog>
</template>
<script>
Polymer({
contentClicked: function() {
this.$.dialog.toggle();
},
domReady: function() {
for (var i = 0; i < this.children.length; i++) {
this.$.container.appendChild(this.children[i].cloneNode(true));
this.$.dialog.appendChild(this.children[i].cloneNode(true));
}
}
});
</script>
</polymer-element>
<sample-element>
<h1>Hi!</h1>
<div>Hello!</div>
</sample-element>
</body>
</html>
这篇关于聚合物重复元素含量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
