我正在尝试使用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);
谁能告诉我,怎么了?
最佳答案
您正在做的事情应该可以工作。我想知道是否由于在较大的应用程序上下文中执行脚本的方式而遇到计时问题。但是这是功能上等效的代码片段:
<!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创建这些元素。我个人发现,当使用Polymer的
<template>
逻辑通过DOM处理尽可能多的代码时,Polymer代码更易于阅读和维护。例如,如果您要创建JavaScript元素是因为您想有条件地包含这些元素,那么在DOM的该部分周围包裹<template if="{{your_condition}}">
可以为您解决这个问题。同样,如果要使用JavaScript进行此操作是因为要对数组中的每个元素重复多次逻辑,则<template repeat="{{item in your_array}}">
可以为您处理。如果您没有看过data-binding section of the docs,那就太好了。
关于javascript - polymer 核心标签和核心复选框动态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27129396/