问题
我将 polymer 从 0.5 升级到 1.5， paper 复选框现在出现两次。
进度
我尝试运行 Polyup 并浏览了整个 polymer 升级指南，但没有一个程序解决了这个问题。我确实发现了两件事:
1.
正常工作时，html 看起来像
paper-checkbox
checkboxContainer
checkboxLabel
我发现我的情况看起来像
paper-checkbox
checkboxContainer
checkboxLabel
checkboxContainer
checkboxLabel
这让我相信 polymer 正在处理纸质复选框两次。然而，我仔细检查了一下，我没有多次加载 paper-checkbox.html，这是我在这方面的唯一想法。
2.
主要内容位于 Fly-in 中，其部分作为 html 导入加载。我发现导入的 html 中的 paper 复选框表现出这种行为，但如果我将 paper 复选框硬编码到飞入中，它就会正常工作。
问题
什么会导致 polymer 尝试处理纸质复选框两次？ html 导入会导致这种情况吗？
编辑:
应托尼的要求转储代码。
默认.html
<head>
<title>Title</title>
<meta charset="utf-8" />
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="styles//font-awesome.css?ver=v2.3.2-22-g83c2652" />
<link rel="stylesheet" type="text/css" href="scripts/jquery-ui/jquery-ui.min.css?ver=v2.3.2-22-g83c2652" />
<link rel="stylesheet" type="text/css" href="styles/main.css?ver=v2.3.2-22-g83c2652" shim-shadowdom />
<!-- favicon -->
<link rel="icon" type="image/ico" href="img/favicon.ico" />
<!-- HTML Imports -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" id="doc_nav" href="page/nav.html" onerror="handleError(event)">
<link rel="import" id="order_billing" href="page/billing.html" onerror="handleError(event)">
<link rel="import" id="order_submit" href="page/certify.html" onerror="handleError(event)">
</head>
<body>
// Some generic html then this, the section the imports are added to
<article class="fly-in transition-out">
</article>
// The relevant script
<script type="text/javascript">
// when imports are loaded, render starting page
window.addEventListener('HTMLImportsLoaded', function () {
init();
});
</script>
</body>
import.js相关函数
// render all the pages of order type to the DOM then hide them
function renderOrderPages(){
var pages = document.querySelectorAll("link[id^='order_']");
var article = document.querySelector("article");
for (var i = 0; i < pages.length; ++i) {
var pg_content = pages[i].import;
var pg_section = pg_content.querySelector('section');
pg_section.style.display = "none";
article.appendChild(pg_section.cloneNode(true));
bind_page_events(pg_section.id);
}
}
最佳答案
正如您所发现的，深度节点克隆 ( cloneNode(true ) 无法正确处理 <paper-checkbox> Polymer 1.x 中的模板(包含在 <dom-module> 中)，而之前在 Polymer 0.5 中没有问题(其中容器是 <polymer-element> )。
虽然我无法确切地解释为什么cloneNode(true)正在复制 paper-checkbox 的模板在 Polymer 1.x 中，我可以提供替代方案:
更改<section>至 <template> ，和cloneNode()至 importNode() :
for (var i = 0; i < pages.length; ++i) {
var pg_content = pages[i].import;
var template = pg_content.querySelector('template');
var node = document.importNode(template.content, true);
article.appendChild(node);
}
关于javascript - polymer 升级后，当作为 HTML 导入加载时，纸质复选框会创建两次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38000415/