聚合物核心標籤和核心複選框動態

我試圖用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

聚合物核心標籤和核心複選框動態

回答

相關問題