聚合物核心标签和核心复选框动态

我试图用javascript生成core-label元素的列表。聚合物核心标签和核心复选框动态

在文档（https://www.polymer-project.org/docs/elements/core-elements.html#core-label）中写道，我可以在core-label的输入元素中添加属性for来连接它们。

如果我的代码是静态的这个样子，这是可能的：

<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);

有谁可以告诉我，最新怎么了？

来源

2014-11-25 Jokus

你在做什么应该工作。我想知道是否由于脚本在应用程序的更大环境中执行的方式而遇到计时问题。但这里的，没有工作功能等同的片段：

<!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处理尽可能多的聚合物代码更容易阅读和维护。例如，如果您使用JavaScript元素创建，因为您希望有条件地包含这些元素，那么围绕DOM的那一部分包装<template if="{{your_condition}}">可以为您解决这个问题。同样，如果您是通过JavaScript实现这一功能的，因为您希望多次为数组中的每个元素重复逻辑，则<template repeat="{{item in your_array}}">可以为您处理该问题。 data-binding section of the docs很好，如果你还没有看到它。

来源

2014-11-25 15:52:06

我之前没有重复工作，但它工作得很好，看起来好多了。谢谢！ – Jokus 2014-11-25 17:30:49

聚合物核心标签和核心复选框动态

回答

相关问题