使用 Turbolinks 时用户单击后退按钮时 MDL 菜单不起作用答案

【问题标题】：MDL menu does not work when user clicks back button when using Turbolinks使用 Turbolinks 时用户单击后退按钮时 MDL 菜单不起作用
【发布时间】：2016-08-31 21:52:12
【问题描述】：

所以这里是显示 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();

【问题讨论】：

标签： turbolinks material-design-lite

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

这实际上解决了我的问题

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

【讨论】：