CODEWITHSUNDEEP
javascriptpolymer
ayortanli
ayortanli

Reputation: 121

Cannot insert elements to custom elements dynamically in Polymer

I am new with Polymer.

I want to implement a container in which i will add other elements to it programmatically in my application. But i cannot do it.

Here is my custom component (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>

And in my 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>

When i click the button, i am waiting to see images in the places of tag. However, it appends images directly under the tag. Shouldn't i use direct javascript dom modification like in this example. What is my mistake?

Upvotes: 0

Views: 729

Answers (1)

coderfin
coderfin

Reputation: 1763

In Polymer 1.0 you should use the DOM API to append children.

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

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

Instead of: 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.


Checkout the working example below.

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>

Upvotes: 1

Related Questions