聚合物核-标签和核-复选框动态
我试图用javascript生成一个core-label元素列表。
在文档(https://www.polymer-project.org/docs/elements/core-elements.html#core-label)中，可以将属性for添加到core-label中的输入元素中，以连接它们。
如果我像这样对它进行静态编码，就有可能：
<core-label>
<core-image></core-image>
<paper-checkbox for></paper-checkbox>
<span>Text</span>
</core-label>但是如果我试图在脚本中添加那些动态元素，这些元素就没有连接.
var catLayout = document.createElement("core-label");
var img = document.createElement("core-image");
var chk = document.createElement("paper-checkbox");
chk.setAttribute("for","");
var label = document.createElement("span");
var labelcontent = document.createTextNode("text");
label.appendChild(labelcontent);
catLayout.appendChild(img);
catLayout.appendChild(chk);
catLayout.appendChild(label);谁能告诉我，出什么事了？
回答 1
Stack Overflow用户
发布于 2014-11-25 15:52:06
你现在所做的应该是有效的。我不知道您是否遇到了时间问题，因为您的脚本是在应用程序的更大上下文中执行的。但是，这里有一个功能等价的代码片段来完成这项工作：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="//www.polymer-project.org/webcomponents.js"></script>
<link rel="import" href="//www.polymer-project.org/components/core-label/core-label.html">
<link rel="import" href="//www.polymer-project.org/components/paper-checkbox/paper-checkbox.html">
<div>
<core-label>
<paper-checkbox for></paper-checkbox>
<span>Created via Markup</span>
</core-label>
</div>
<div id="container"></div>
<script>
var coreLabel = document.createElement('core-label');
var paperCheckbox = document.createElement('paper-checkbox');
paperCheckbox.setAttribute('for', '');
var text = document.createElement('span');
text.textContent = 'Created via JavaScript';
coreLabel.appendChild(paperCheckbox);
coreLabel.appendChild(text);
document.querySelector('#container').appendChild(coreLabel);
</script>
</body>
</html>
尽管如此，我很好奇为什么您需要通过JavaScript创建这些元素。我个人认为，当使用聚合物的<template>逻辑通过DOM处理尽可能多的时候，聚合物代码更容易阅读和维护。例如，如果您由于想有条件地包含这些元素而诉诸于JavaScript元素创建，那么将<template if="{{your_condition}}">包装在DOM的这一部分可以为您处理。类似地，如果您在JavaScript中执行此操作，因为您希望对数组中的每个元素重复多次逻辑，那么<template repeat="{{item in your_array}}">可以为您处理这个问题。如果你还没看过文档的数据绑定部分，那就太棒了。
https://stackoverflow.com/questions/27129396
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号