动态添加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。然后升级。

Answer 2

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

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