当用户在使用 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。如果我点击菜单中的 link 然后点击后退按钮，下拉菜单将保持打开状态。有什么想法吗？

相关问题是 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)

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

Answer 2

我遇到了同样的问题。显然，只有在使用后退按钮（而不是前进按钮）时才会发生这种情况。我的解决方法是添加具有以下内容的 javascript 文件

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

@addEventListener "popstate", (e)->
  Turbolinks.visit(e.target.location)

Answer 3

这实际上解决了我的问题

<meta name="turbolinks-cache-control" content="no-cache">

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

MDL menu does not work when user clicks back button when using Turbolinks

turbolinks

material-design-lite