turbolinks - 当用户在使用 Turbolinks 时单击后退按钮时，MDL 菜单不起作用

Question

下面是显示 mdl 菜单的代码。他们单击编辑按钮，然后出现一个菜单。

<button class="mdl-button mdl-js-button mdl-js-ripple-effect" id="edit-button"> edit</button>
<ul id="edit_menu"  class="mdl-menu mdl-js-menu mdl-js-ripple-effect" for="edit-button">
  <li>change</li>
  <li>do something else</li>
</ul>

不幸的是，当用户单击后退按钮返回带有下拉菜单的页面时，下拉菜单不再起作用。我似乎无法重新初始化 MDL。如果我单击菜单中的链接，然后点击后退按钮，下拉菜单将保持打开状态。有什么想法吗？

相关问题是 turbolinks 破坏了 MDL 内容，但这段代码修复了它。不幸的是，当用户点击后退按钮时，它没有修复下拉菜单

document.addEventListener 'turbolinks:load', ->
  componentHandler.upgradeDom();

Answer 1

这是我解决问题的变通方法。它只发生在 1 个特定页面上，所以我在 URL 中找到了一个唯一的字符串，然后覆盖后退按钮以进行 turbolinks 访问。

window.addEventListener "popstate", (e)->
  if  (e.target.location.pathname.indexOf('customize_board')  != -1 )
    Turbolinks.visit( e.target.location)

我希望至少可以帮助一些人，以免他们的页面损坏。