Problem
I upgraded polymer from 0.5 to 1.5 and paper-checkboxes now appear twice.
Progress
I tried running polyup and went through the whole polymer upgrade guide but none of the procedures solved this problem. I did find two things:
1.
When working correctly the html looks like
paper-checkbox
checkboxContainer
checkboxLabel
I found in my case it looks like
paper-checkbox
checkboxContainer
checkboxLabel
checkboxContainer
checkboxLabel
This leads me to believe that polymer is processing the paper-checkbox twice. However, I double checked and I am not loading paper-checkbox.html more than once which was my only idea on that front.
2.
The main content is in a fly-in whose sections are loaded as html imports. I found that a paper-checkbox in the imported html exhibits the behavior, but if I hard code a paper-checkbox into the fly-in it works correctly.
Question
What would cause polymer to try to process the paper-checkbox twice? What about html imports could be causing this?
Edit:
Code dump at Tony's request.
default.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 relevant function
// 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);
}
}
Aucun commentaire:
Enregistrer un commentaire