Динамическое добавление панели навигации MDL

У меня возникла проблема с динамическим добавлением навигационного ящика Material Design Lite (MSL). Я рассмотрел аналогичный вопрос, а именно:

Рендеринг меню ящика MDL приводит к исчезновению кнопки ящика

и соответствующие

http://mdlhut.com/2015/07/where-is-the-mdl-drawer-icon/

и я считаю, что правильно обновляю DOM, добавив его. Я собрал то, что я считаю самым простым примером, по адресу:

https://acuth.github.io/b2wac/html/mdl2.html

Если я раскомментирую mdl-layout__drawer, все будет работать правильно, хотя значок навигационного ящика выровнен неправильно, что заставляет меня задаться вопросом, не в том ли проблема, что я пропустил какой-то жизненно важный элемент в исходном HTML.

Как всегда, любая помощь будет принята с благодарностью.


material-design-lite
person acuth    schedule 27.02.2016    source источник
comment
Этот вопрос может быть по существу таким же, как заголовок stackoverflow.com/questions/32254576/, но включает (не) рабочий пример. Я также попытался сделать его доступным на jsFiddle по адресу jsfiddle.net/acuth/0dg3xjkq.   -  person acuth    schedule 27.02.2016

Ответы (2)


arrow_upward
0
arrow_downward

вы должны добавить событие javascript:

<script type="text/javascript">
  document.addEventListener('turbolinks:load', function() {
      componentHandler.upgradeDom();
  });
</script>

Ваше здоровье.

Также вы можете добавить новую функцию javascript, которая добавляет innerHTML в ваш навигационный ящик. Затем обновите DOM.

person Allan Ramirez    schedule 02.10.2016

arrow_upward
0
arrow_downward

Попробуйте понизить версию узлов, а затем обновить DOM.

componentHandler.downgradeElements(document.querySelector(".mdl-layout")); 
componentHandler.upgradeDom();
person Krishna Santosh Nidri    schedule 24.09.2017