gpt4 book ai didi

polymer - 克隆 polymer 元素的正确方法是什么?

转载 作者:行者123 更新时间:2023-12-03 21:43:25 24 4
gpt4 key购买 nike

我一直在尝试克隆 polymer 元素——通常是从某种数据创建的元素,因此不能只使用构造函数或 document.createElement 创建模板的新实例。 .

  • element.cloneNode不能单独工作,因为它不复制影子根
  • lodashPolymer Clone Objects 提议似乎什么也没做(克隆对象为空)
  • cloneEl.shadowRoot.innerHTML = sourceEl.shadowRoot.innerHTML;复制 shadow-root,但似乎失去了绑定(bind)

  • 扩展示例: http://jsbin.com/vitumuwayu/3/edit

    有没有 Polymer.cloneNode我一直找不到的功能?

    最佳答案

    我终于找到了这个问题的答案(至少对于 Polymer 1.0)。

    https://stackoverflow.com/a/6620327/1878199显示如何复制属性。
    https://stackoverflow.com/a/25187164/1878199描述了如何获取 polymer 元素的属性列表。

    那么答案是:

    newElement = element.cloneNode(true);
    for(var i in element.properties) {
    newElement[i] = element[i]
    }

    完整的图解和工作示例 on 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>

    关于polymer - 克隆 polymer 元素的正确方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30005682/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com