克隆聚合物元素的正确方法是什么？
[英]What is the correct way to clone a polymer element?
问题描述
I have been trying to clone polymer elements - typically elements that have been created from data of some kind, so it is not an option to just create a new instance of the template with the constructor or document.createElement . 
我一直在尝试克隆聚合物元素 - 通常是从某种数据创建的元素，因此不能用构造函数或document.createElement创建模板的新实例。
-
element.cloneNodedoes not work on its own as it does not copy the shadow-rootelement.cloneNode本身不起作用，因为它不复制shadow-root -
lodashproposed by Polymer Clone Objects does not seem to do anything (cloned object is empty)Polymer Clone Objects提出的lodash似乎没有做任何事情（克隆对象为空） -
cloneEl.shadowRoot.innerHTML = sourceEl.shadowRoot.innerHTML;copies the shadow-root, but seems to lose the binding复制阴影根，但似乎失去了绑定
Extensive example: http://jsbin.com/vitumuwayu/3/edit 广泛的例子： http ： //jsbin.com/vitumuwayu/3/edit
Is there a Polymer.cloneNode function I have been unable to find? 是否有我无法找到的Polymer.cloneNode函数？
2 个解决方案
解决方案1
2 已采纳 2015-09-12 11:29:26
I have finally found an answer to this question (at least for Polymer 1.0). 我终于找到了这个问题的答案（至少对于Polymer 1.0来说）。
https://stackoverflow.com/a/6620327/1878199 shows how to copy properties. https://stackoverflow.com/a/6620327/1878199显示了如何复制属性。 https://stackoverflow.com/a/25187164/1878199 describes how to get the list of properties for a polymer element. https://stackoverflow.com/a/25187164/1878199描述了如何获取聚合物元素的属性列表。
The answer is then: 答案是：
newElement = element.cloneNode(true);
for(var i in element.properties) {
newElement[i] = element[i]
}
Full illustrated and working example on jsbin or in the snippet below. 有关jsbin或下面代码段的完整插图和工作示例。
<!DOCTYPE html> <html> <head> <link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.0.1/lib/polymer/polymer.html"> <meta charset="utf-8"> <title>Polymer Cloning Example</title> </head> <dom-module id="custom-element"> <template> <div style="border: solid"> <input type="text" name="some_string" value="{{boundvalue::input}}"> <p>{{boundvalue}}</p> </div> </template> <script> Polymer({ is: 'custom-element', properties: { boundvalue: { type: String, value: 'Enter some text...', notify: true } } }); </script> </dom-module> <body> <custom-element id="source-element"></custom-element> <p> <button onclick="cloneElementWithoutProperties()">1 Clone the above element into the list below</button> <p></p> <button onclick="cloneElementWithProperties()">2 Clone the above element into the list below and also copy properties</button> <p></p> <h3>Test Description</h3> <ol> <li>Modify text above</li> <li>Click Button 1</li> <p></p> <p>Observed: An element is added below, but it is reset to the original text ('Enter some text...')</p> <li>Click Button 2</li> <p></p> <p>Observed: An element is added below, and it keeps the modified text</p> <p>Also verify that the functionality is still ok: Modify the input in the copy, the text is also updated</p> </ol> <h3>List of cloned elements:</h3> <div id='list-elements'> </div> </body> </html> <script> function cloneElementWithProperties() { list = document.querySelector("#list-elements"); sourceEl = document.querySelector("#source-element") cloneEl = sourceEl.cloneNode(true); for (var i in sourceEl.properties) { cloneEl[i] = sourceEl[i]; } list.insertBefore(cloneEl, null); } function cloneElementWithoutProperties() { list = document.querySelector("#list-elements"); sourceEl = document.querySelector("#source-element") cloneEl = sourceEl.cloneNode(true); list.insertBefore(cloneEl, null); } </script>
解决方案2
0 2016-11-08 21:16:34
This is my clone function. 这是我的克隆功能。
var clone = function(orig) {
var ret = orig.cloneNode();
var lightDom;
var childNodes;
if (orig.is && orig.is.toUpperCase() === orig.tagName) {
lightDom = Polymer.dom(ret);
childNodes = Polymer.dom(orig).childNodes;
} else {
lightDom = ret;
childNodes = orig.childNodes;
}
for (var i = 0; i < childNodes.length; i++) {
lightDom.appendChild(clone(childNodes[i]));
}
return ret;
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.