javascript - polymer 核心标签和核心复选框动态

标签 javascript html polymer

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

相关文章:

javascript - 当我在 jquery 中修改 HTML 时如何刷新对象?

javascript - 我应该在哪里实现 Polymer 中的一般功能?

javascript - 在更改时将属性发送到自定义元素

polymer - “polymer ”未被识别为内部或外部命令

javascript - 观察者不会在组件中触发

javascript - 在js文件中包含外部js文件

javascript - 在 Whatsapp 中预览 Smooch 视频

python - 尝试在 Django 中上传图像时出现 MultiValueDictKeyError

javascript - 从数据库中将 Iframe 注入(inject) Angular 2

html - 居中表有问题