Question

我正在尝试使用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);

任何人都可以告诉我，怎么了？

Answer 1

你在做什么应该工作。我想知道你是否遇到了计时问题，因为你在应用程序的更大的上下文中执行脚本的方式。但这是一个功能相同的片段，可以完成这项工作：

<!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就很棒。

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

1 个答案: