Когда клонированный элемент MDL-меню добавляется с appendChild, он не имеет никакого поведения - PullRequest
Новая
       10

Когда клонированный элемент MDL-меню добавляется с appendChild, он не имеет никакого поведения

0 голосов
/ 28 мая 2019

Я использую MDL для создания простого веб-интерфейса для приложения. У меня есть MDL-карта, где пользователь может указать простой фильтр для применения к таблице данных. Фильтр указан следующим образом: элемент контейнера, обеспечивающий правильную компоновку, со следующими дочерними элементами: - MDL-меню, позволяющее выбрать поле - MDL-меню, которое позволяет выбрать оператора (например, <, = и т. д.) - элемент, который позволяет указать значение (это может быть текстовое поле mdl или меню mdl, в зависимости от выбранного поля) </p>

Я хотел бы дать пользователю возможность редактировать определенный в настоящее время фильтр, а затем решить, применять ли отредактированный фильтр или отменить редактирование и сохранить текущий определенный фильтр. На карточке фильтра есть кнопка «Применить» и кнопка «Отмена». При нажатии кнопки «Применить» вызывается функция, которая клонирует текущие элементы фильтра (то есть элемент контейнера с его полем, оператором, дочерними значениями) и сохраняет его в глобальной переменной. В главном окне есть кнопка «Фильтр», которая показывает окно фильтра с текущим заданным фильтром. Обработчик onclick кнопки фильтра - это функция, которая удаляет текущие элементы фильтра (поскольку они могут быть результатом отмененного редактирования, а не определенного в данный момент фильтра) и повторно создает текущий определенный фильтр, добавляя клонированный узел, который был сохранен в глобальная переменная. В итоге я получаю набор элементов, которые выглядят корректно (т. Е. Первое mdl-меню показывает это текущее определенное поле, второе mdl-меню показывает определенный в настоящий момент оператор, а третий элемент показывает текущее определенное значение), но mdl Элементы -menu не имеют никакого поведения: если я щелкну первый или второй элемент mdl-menu, раскрывающийся список значений не отобразится. Я пытался вызвать componentHandler.upgradeElement клонированных элементов перед добавлением их с помощью appendChild (), но это не работает.

Ранее я пытался создать элементы с нуля, но я не мог найти способ динамически установить выбранное значение mdl-меню или значение текстового поля mdl), поэтому я пробовал это по-другому подход. 

function showOrderFilter() {
  var filterContainer = document.getElementById("order- 
  filter").querySelector(".mdl-card__supporting-text");
  var listHtml = '';
  if (orderFilterCriteria.length == 0) {
    listHtml += createDefaultFilterRow();
    filterContainer.innerHTML = listHtml;
    componentHandler.upgradeDom();
  } else {
    while (filterContainer.firstChild) 
     {filterContainer.removeChild(filterContainer.firstChild);}
    for (let i = 0; i < currentFilter.length; i++) {                     
      componentHandler.upgradeElement(currentFilter[i]);                     
      filterContainer.appendChild(currentFilter[i]);                 
   }
  }
  showPageDialog("order-filter");
}

Когда я открываю окно фильтра после того, как уже определил фильтр, функция showOrderFilter () берет путь «else» и добавляет ранее клонированный фильтр в filterContainer, но если я щелкаю по одному из двух элементов mdl-menu, пункты меню (т.е. элементы <li>) не отображаются. Используя инструменты разработчика Chrome, я вижу, что клонированные элементы узла уже были обновлены, поэтому я попытался сначала понизить их, но это не решило проблему.

...