gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 09:33:38 25 4
gpt4 key购买 nike

我是 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 修改吗?我的错误是什么?

最佳答案

在 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>

关于javascript - 无法在 Polymer 中动态地将元素插入自定义元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31410009/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com