动态添加MDL导航抽屉

Question

我在动态添加Material Design Lite（MSL）导航抽屉时遇到问题。我看了一个类似的问题，即：

Rerendering MDL drawer menu makes drawer button disappear

和相关的

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

我相信我正在升级添加它的DOM。我把我认为最简单的例子放在一起：

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

如果我取消注释mdl-layout__drawer它一切正常，虽然导航抽屉图标没有正确对齐，这让我想知道问题是我错过了原始HTML中的一些重要元素。

一如既往地感谢任何帮助。

Answer 1

你应该添加一个javascript事件：

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

干杯。

此外，您还可以添加新的javascript函数，在导航抽屉上添加innerHTML。然后是UpgradeDOM。

Answer 2

尝试降级节点然后升级DOM。

componentHandler.downgradeElements(document.querySelector(".mdl-layout")); 
componentHandler.upgradeDom();