Как обновить/обновить элементы MDL Google, которые я добавляю на свою страницу динамически?

Я работаю с компонентами Google Material Design, которые убираются для простоты, а затем отображаются более полно, когда страница загружается. Упрощенное ниже, чтобы проиллюстрировать проблему:

Что отображается в файле index.html:

<div class="switch"></div>

Что отображает DOM при загрузке страницы:

<div class="switch">
   <div class="switch_track"></div>
   <div class="switch_thumb"></div>
</div>

Я создаю HTML-редактор с перетаскиванием и файлы шаблонов для каждого типа компонента. Файл шаблона для коммутатора просто:

switch.html

<div class="switch"></div>

Проблема заключается в том, когда я перетаскиваю это на холст. jQuery смотрит на switch.html и отображает <div class="switch"></div> в DOM, но поскольку он был динамически добавлен, он не воспринимается сценариями, добавляющими дополнительные дорожки и теги большого пальца.

Как я могу исправить эту проблему, чтобы всякий раз, когда DOM обновляется, она перезапускает любые скрипты? В идеале я бы хотел не касаться каких-либо файлов Material Design script.

Ответы

Ответ 1

Я нашел решение в этом сообщении форума MDL Github от автора MDL Джонатан Гарби:

Обработчик компонента [ componentHandler.upgradeDom()] будет обрабатывать все, если вы просто вызываете его без параметров.

Итак, псевдокод моего решения будет:

 // Callback function of jquery-ui droppable element
 drop: function(event, ui) {
    // Add the element from it template file
    $.get("templates/" + elem + ".html", function(data) {
      $("#canvas").append(data);

      // Expand all new MDL elements
      componentHandler.upgradeDom();
    });
 });

Для будущих читателей и пользователей среды Material Design Lite (MDL) вы также можете обновлять динамически добавленные элементы отдельно (вместо того, чтобы расчесывать всю DOM).

Например, componentHandler.upgradeDom("mdl-menu") будет обновлять только элементы mdl-menu.

Дальнейшее чтение здесь.