Макет Material Design Lite ломается при втором обновленииDom()

Я использую Riot.js, и у меня есть корневой элемент, в котором я отображаю другой макет для окна входа и для фактическое приложение. Версия MDL 1.0.6.

Мне не разрешили публиковать изображения, но скриншоты можно найти здесь. Это немного сложно настроить в codepen, поэтому я пока не буду этого делать.

Если я пропущу вход в систему и вызову upgradeAllRegistered() или upgradeDom() после того, как приложение будет добавлено в dom, все будет работать как положено.

Однако, если я сначала визуализирую экран входа в систему, заменяю его приложением и снова вызываю upgradeDom(), макет больше не работает. Заголовок не вверху.

Я проверил дом с помощью diff, и в обоих случаях он идентичен. Это начинается так:

<div id="app" riot-tag="app">
  <div class="mdl-layout__container">
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header has-drawer is-upgraded" data-upgraded=",MaterialLayout">
      <header class="mdl-layout__header mdl-color--primary mdl-color-text--primary-contrast is-casting-shadow">
        <div class="mdl-layout__drawer-button"><i class="material-icons">menu</i></div>
          <div class="mdl-layout__header-row">
            <span class="mdl-layout-title">Home</span>
              ...

Я не верю, что это происходит только с riot, но и с другими фреймворками. Я предполагаю, что проблема заключается в MaterialLayout, который не работает правильно, если он инициализирован несколько раз. Макет основан на примере панели инструментов.

Любые предложения, как сбросить макет? Если это невозможно, я всегда могу сделать полное обновление после входа в систему.


material-design-lite riot.js
person RanzQ    schedule 19.01.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я столкнулся с той же ситуацией при использовании Riot.js, и решение состоит в повторной инициализации компонента MDL MaterialLayout. Это делается следующим образом:

<div id="app" class="mdl-layout mdl-js-layout">
</div>

var element = document.querySelector('#app:not(.is-upgraded)')
element.MaterialLayout.init();

Примечание: повторная инициализация MaterialLayout для уже обновленного элемента является проблемой, поэтому добавлена ​​проверка, был ли элемент уже обновлен или нет.

person Apoorv Saxena    schedule 06.06.2016