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

Question

I am new with Polymer. 我是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): 这是我的自定义组件（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 在我的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. 我不应该像这个例子那样使用直接的javascript dom修改。 What is my mistake? 我怎么了

Answer 1

In Polymer 1.0 you should use the DOM API to append children. 在Polymer 1.0中，您应该使用DOM API附加子级。

Polymer provides a custom API for manipulating DOM such that local DOM and light DOM trees are properly maintained. Polymer提供了用于处理DOM的自定义API，以便正确维护本地DOM和轻量DOM树。 These methods and properties have the same signatures as their standard DOM equivalents 这些方法和属性与其标准DOM等效项具有相同的签名。

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

Instead of : mainBox.appendChild(img); 代替： mainBox.appendChild(img);

Polymer.dom(parent).appendChild(node) Polymer.dom（父）.appendChild（节点）

Calling append/insertBefore where parent is a custom Polymer element adds the node to the light DOM of the element. 在parent是自定义Polymer元素的地方调用append / insertBefore，将节点添加到该元素的轻型DOM。

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>

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-07-22 15:38:13

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-07-22 15:38:13

解决方案1
1 已采纳 2015-07-22 15:38:13