Question

我想创建显示其内容的自定义元素，如果点击内容，它将以纸质对话框显示。我有：

<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，而不是纸质对话框。是否有一些简单的方法可以将内容从div复制到对话框？

Answer 1

正如本elsewhere on Stack Overflow中所述，您不使用<content>插入点将轻型DOM引入您的元素。您还可以使用this.children从JavaScript访问轻型DOM节点。

可能有一种更简单的方法，但只是循环遍历所有子节点，克隆节点，并多次附加它们确实有效。需要注意的一点是，由于您要将原始轻型DOM节点的克隆添加到元素中，因此在页面生命周期内对轻型DOM所做的任何更改都不会反映在这些副本中 - 每个副本可能会得到不同步。

<!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>

聚合物重复元素含量

1 个答案: