javascript - Cannot insert elements to custom elements dynamically in Polymer -
i new polymer.
i want implement container in add other elements programmatically in application. cannot it.
here 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 index.html
<html> <head> .... <script type="text/javascript"> function loadimg(){ var mainbox = document.queryselector("#mainbox"); for(var = 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 click button, waiting see images in places of tag. however, appends images directly under tag. shouldn't use direct javascript dom modification in example. mistake?
in polymer 1.0 should use dom api append children.
polymer provides custom api manipulating dom such local dom , light dom trees maintained. these methods , properties have same signatures standard dom equivalents
use: polymer.dom(mainbox).appendchild(img);
instead of: mainbox.appendchild(img);
- polymer.dom(parent).appendchild(node)
calling append/insertbefore parent custom polymer element adds node light dom of element.
checkout working example below.
document.queryselector("button").addeventlistener("click", function() { var mainbox = document.queryselector("ay-box"); (var = 0; < 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>
Comments
Post a Comment