首页 文章

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

提问于
浏览 次
0

我是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修改 . 我的错是什么？

javascript polymer

1 回答

  • 1

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

    Polymer提供了一个用于操作DOM的自定义API，以便正确维护本地DOM和轻型DOM树 . 这些方法和属性与其标准DOM等价物具有相同的签名

    Use ： Polymer.dom(mainbox).appendChild(img);

    Instead of ： mainBox.appendChild(img);

    Polymer.dom（parent）.appendChild（node）调用append / insertBefore，其中parent是自定义Polymer元素，将节点添加到元素的light DOM .

    查看下面的工作示例 .

    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>
    回复于

相关问题