TurboLinks与Bootstrap模态框的问题

Question

我正在制作一个如下所示的模态框：

显示模态框的链接：

<%= link_to "versão resumida", resumed_rep_life_animal_path(animal, :partial => true), 'data-toggle' => 'modal', 'data-target' => '#myModal', 'data-no-turbolink' => true %>

模态框的HTML代码：

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-body"></div>
  <div class="modal-footer">
    <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Fechar</button>
  </div>
</div>

然而，data-no-turbolink并没有像预期的那样起作用。如果我刷新页面，它能正常工作，但是当我使用turbolinks浏览页面时，data-no-turbolink看起来就被忽略了。

我做错了什么吗？我在我的应用程序中有一些像示例一样的模态框，不想删除它们，也不想删除turbolinks...

提前致谢。

- caarlos0

Answer 1

根据davydotcom的说法，模态框无法正常工作是因为它们绑定到了$(document).ready而不是$(document).on('page:change')，后者是turbolinks使用的方式。

使用jquery-turbolinks gem可以使ready调用也响应turbolink的page:change调用。 Step 1: 将gem jquery-turbolinks添加到您的Gemfile中。 Step 2: 按照以下顺序将其添加到JavaScript清单文件中：

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks

第三步：重新启动您的服务器。嘭！

- Joshua Plicque

---

谢谢。同时，只有在将JS保留在头部时才能正常工作。 - b1nary

请更新此答案，因为jquery.turbolinks已经被存档在https://github.com/kossnocorp/jquery.turbolinks。 - Agung Yuliaji

Answer 2

这里的问题不在于 data-no-turbolinks...

看起来 bootstrap js 默认只监视 document.ready，而且可能需要修改 bootstrap JS 以检查 page:load。

查看第222行

这只会在第一次请求中包含 bootstrap 时触发。它需要被修改以在 page:load 时触发。

我可以提出一个建议，使用 gem 'twitter-bootstrap-turbo' 来获取 bootstrap。这是 twitter-bootstrap-rails 的分支，增加了 turbolinks 处理程序。

- davydotcom

---

这是关于编程的内容，请将其翻译成中文。只返回翻译后的文本：有什么建议可以正确地修复它吗？ - caarlos0

我添加了一些关于如何使用twitter-bootstrap-turbo gem的具体细节。 - davydotcom

你可能还想尝试使用 https://github.com/kossnocorp/jquery.turbolinks （这样就不必修改bootstrap）。 - montrealmike