无法在 Polymer 中动态地将元素插入自定义元素

Question

我是 Polymer 的新手。

我想实现一个容器，我将在我的应用程序中以编程方式向其中添加其他元素。但是我做不到。

这是我的自定义组件 (ay-box.html):

<dom-module id="ay-box">
    <template>
        <div id="container" style="display: inline-block;">
            <div id="content" class="content">
                <content></content>
            </div>
            <div id="footer" class="footer">
               <label># of Items : </label>
               <label>{{item_count}}</label>
            </div>
        </div>
    </template>

    <script>
        Polymer({
          is: "ay-box",
          properties: {
              item_count: {
                  type: Number,
                  value: 0
              },      
          }
        });
    </script>
</dom-module>

在我的 index.html

<html>
    <head>
        ....        
        <script type="text/javascript">
        function loadImg(){
            var mainBox = document.querySelector("#mainbox");
            for(var i = 0; i< 10;++i){
                var img = document.createElement("img");
                img.id = "img" + i;
                img.src = "img.png";
                img.draggable = true;
                mainBox.appendChild(img);
            }
        }
        </script>
    </head>
    <body>
        <ay-box id=mainbox></ay-box>        
        <button onclick="loadImg()">click</button>
    </body>
</html>

当我点击按钮时，我在标签的地方等着看图片。但是，它会直接在标签下附加图像。我不应该像本例中那样使用直接 javascript dom 修改。我的错误是什么？

Answer 1

在 Polymer 1.0 中，您应该使用 DOM API 来追加子项。

Polymer provides a custom API for manipulating DOM such that local DOM and light DOM trees are properly maintained. These methods and properties have the same signatures as their standard DOM equivalents

使用：Polymer.dom(mainbox).appendChild(img);

而不是：mainBox.appendChild(img);

Polymer.dom(parent).appendChild(node)

Calling append/insertBefore where parent is a custom Polymer element adds the node to the light DOM of the element.

查看下面的工作示例。

document.querySelector("button").addEventListener("click", function() {
  var mainBox = document.querySelector("ay-box");

  for (var i = 0; i < 10; i++) {
    var img = document.createElement("img");
    img.id = "img-" + i;
    img.src = "http://lorempixel.com/50/50/?rand=" + Date.now() + i;
    img.draggable = true;
    Polymer.dom(mainBox).appendChild(img);
  }
});

<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="ay-box">
  <style>
    ::content img {
      float: left;
    }
    ::content img:nth-child(10n + 1) {
      clear: left;
    }
    footer {
      clear: both;
    }
  </style>
  <template>
    <content></content>
    <footer>
      <span># of Images: <em>[[numImages]]</em></span>
    </footer>
  </template>
  <script>
    Polymer({
      is: "ay-box",
      properties: {
        numImages: {
          type: Number,
          value: 0
        }
      },
      ready: function() {
        new MutationObserver(function(mutations) {
          this.numImages = Polymer.dom(this).querySelectorAll("img").length;
        }.bind(this)).observe(this, {
          childList: true
        });
      }
    });
  </script>
</dom-module>
<ay-box></ay-box>
<button>click</button>

无法在 Polymer 中动态地将元素插入自定义元素

Cannot insert elements to custom elements dynamically in Polymer

javascript

polymer