После обновления полимера бумажные флажки создаются дважды при загрузке в качестве импорта HTML

проблема

Я обновил полимер с 0,5 до 1,5, и бумажные флажки теперь появляются дважды.

Прогресс

Я попытался запустить polyup и прошел полное руководство по обновлению полимера, но ни одна из процедур не решила эту проблему. Я нашел две вещи:

1.

При правильной работе HTML выглядит

paper-checkbox
  checkboxContainer
  checkboxLabel

Я нашел в моем случае это выглядит

paper-checkbox
  checkboxContainer
  checkboxLabel
    checkboxContainer
    checkboxLabel

Это приводит меня к мысли, что полимер обрабатывает бумажный флажок дважды. Однако я дважды проверил и не загружаю paper-checkbox.html более одного раза, что было моей единственной идеей на этом фронте.

2.

Основное содержание находится во всплывающем окне, чьи разделы загружаются как импорт html. Я обнаружил, что бумажный флажок в импортированном html демонстрирует поведение, но если я жестко закодировал бумажный флажок во всплывающем окне, он работает правильно.

Вопрос

Что заставило бы полимер попытаться обработать бумажный флажок дважды? Как насчет импорта HTML может быть причиной этого?

Редактировать:

Дамп кода по запросу Тони.

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 соответствующая функция

// 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);
    }
}
Источник

1 ответ

Решение

Как вы обнаружили, глубокое клонирование узлов (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);
}

plunker

Источник
Другие вопросы по тегам