带有 mmenu/sidr 和 Jquery 和 Turbolinks 问题的 Rails

Posted 2023-05-08

【中文标题】带有 mmenu/sidr 和 Jquery 和 Turbolinks 问题的 Rails

【英文标题】：Rails with mmenu/sidr with Jquery and Turbolinks issue

【发布时间】：2015-03-06 02:46:45

【问题描述】：

我无法查明这一点，但有人怀疑 turbolinks 是罪魁祸首。更改菜单只是为了确保它不是一些奇怪的菜单问题。

我打开页面，单击菜单按钮 - 它工作，它打开侧面菜单，我单击菜单中的链接，然后它返回到我的应用程序。然后菜单按钮不再触发。最初当我使用 mmenu 时，它似乎缺少与 mmenu 相关的点击事件。使用 sidr，它似乎在那里，但没有任何反应。

我已经像这样设置了我的 jquery

Rails 4: how to use $(document).ready() with turbo-links

示例 sidr

<a id="simple-menu" href="#sidr">Menu link</a>

<div id="sidr">
<ul>
<li><a href="#">List 1</a></li>
<li class="active"><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div> 

JS 文件包含在树中

var ready;
ready = function() 

    $('#simple-menu').sidr();

;

$(ready);
$(document).on('page:load', ready);

我已经使用 jquery turbolinks gem 设置了我的 application.js，例如

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap-sprockets
//= require jquery-ui/core
//= require jquery-ui/autocomplete
//= require jquery.mmenu.min
//= require_tree .
//= require turbolinks

建议？

【问题讨论】：

你的意思是$('#sidr').sidr();？

有一个未包含在代码中的链接。不，显然应该是简单菜单berriart.com/sidr/#

我能找到的唯一完整的解决方法是完全禁用 turbolinks...希望能重新集成它并同时工作

我遇到了完全相同的问题。在初始页面加载时，菜单按预期工作。但是从菜单中单击链接会以某种方式破坏下一页上的菜单。奇怪的是其他 turbolinks 请求工作正常。我可以单击菜单外的链接，然后菜单将在下一页打开。非常令人沮丧。

【参考方案1】：

我对 Mmenu 和 Turbolinks 也有同样的问题。我已经按照 evanbikes 的描述做了。禁用 turbolinks 和 Mmenu 有效。但是当启用它时，它只是在单击菜单中的链接后不起作用。 其他一切正常，我们所有的 js 代码。所以这一定和 Turbolinks 有关系。

https://github.com/karlingen/rails4_mmenu

https://github.com/BeSite/jQuery.mmenu/issues/41

很想使用 Mmenu，但目前使用 Turbolinks 是不可能的。

【参考方案2】：

试试这个。

安装'jquery-turbolinks'https://github.com/kossnocorp/jquery.turbolinks

那么简单

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require foundation

    // Make sure to add your code here
    // For example with foundation it is:


$(function() $(document).foundation(); );

//= require turbolinks
//= require_tree .

希望对您有所帮助。至少对我来说效果很好。

【讨论】：

嘿，您的回答确实有助于解决我一直在努力解决的问题。谢谢！

【参考方案3】：

以下是一些想法：

1) 确保您的 javascript 包含在头部而不是正文的底部。由于 Turbolinks 每次都会重新加载正文，因此您将重新加载相同的 javascript 并可能重新初始化重复的侦听器。

2) 使用 jquery.turbolinks gem，您应该只需要$(ready) 而不需要$(document).on('page:load', ready)。从理论上讲，这就是 jquery.turbolinks 为您所做的。

3) ready 是否开火了？你把console.log 或alert 放在那里看看吗？

4) 你是通过 ajax 还是在 DOM 准备好之后 加载东西？如果是这样，当它实际出现在页面上时，您需要手动调用 .sidr()，即使它是在 DOM 准备好之后。

【讨论】：

感谢您的回复。下周我会再调查一下！

【参考方案4】：

经过一番挫折，我终于发现有人在 GitHub 存储库上针对这个确切的问题提出了拉取请求。截至本答案发布时尚未合并，但它是一个快速修复，它就像一个魅力！

https://github.com/artberri/sidr/pull/183/files

【参考方案5】：

我正在使用 jquery.sidemenu.js，它是一个与 Turbolinks 兼容的 mmenu jQuery 插件。

https://github.com/kami30k/jquery.sidemenu.js/

【参考方案6】：

有一种方法可以解决此问题。从 Turbolinks Doc - Opting out of Turbolinks 您可以添加 data-no-turbolink 属性以禁用该特定 div 标签上的 turbolink。所以修改你的代码如下，它会正常工作。

<div id="sidr">
<!-- Your content -->
 <ul>
  <li><a href="#">List 1</a></li>
  <li class="active" data-no-turbolink><a href="/">List 2</a></li>
  <li><a href="#">List 3</a></li>
 </ul>
</div>

【参考方案7】：

我知道已经有一段时间了，但想为可能正在寻找的人留下更新的解决方案。

Mmenu 开发人员添加了包装器以支持各种框架，包括 turbolinks：mmenu framework wrappers

所以现在，解决这个 turbolinks 错误所需要做的就是从他们的站点或 github 存储库下载最新版本的 mmenu，并将位于 dist/wrappers/turbolinks 中的文件包含在主 mmenu 文件之后。

如果您手动包含它们，它将如下所示：

<script src="path/to/jquery.mmenu.min.js" type="text/javascript"></script>
<script src="path/to/jquery.mmenu.wordpress.min.js" type="text/javascript"></script>

如果你使用的是链轮，像这样：

//= require jquery.mmenu
//= require jquery.mmenu.turbolinks