引导模式的 turbolinks 问题

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...

提前致谢。

Answer 1

正如 davydotcom 所说，模态框不工作的原因是它们绑定到 $(document).ready 而不是 $(document).on('page:change')，这是 turbolinks 使用的。

jquery-turbolinks gem 将使得就绪调用也响应 turbolink 的 page:change 调用。

第 1 步： 将 gem jquery-turbolinks 添加到您的 Gemfile。

第 2 步： 按以下顺序将其添加到您的 JavaScript 清单文件中：

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

第 3 步：重新启动您的服务器。轰隆隆！

Answer 2

data-no-turbolinks 不是这里的问题......

开箱即用的 bootstrap js 似乎只监控 document.ready，并且 bootstrap JS 可能需要修改以检查 page:load

Look at line 222

这只会在包含引导程序的第一个请求时触发。它也需要修改为在 page:load 上触发。

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