Rails 5 – turbolinks 5，一些JS没有在页面上加载渲染
我有一个Rails应用程序，我最近更新到5.0.0.RC1 。 大部分过渡进展顺利，但我在使用新的Turbolinks时遇到了一些麻烦。 在我的应用程序中我例如使用此gem：
gem 'chosen-rails'
我的application.js文件如下所示：
//= require jquery //= require jquery.turbolinks //= require jquery_ujs //= require best_in_place //= require tether //= require bootstrap //= require chosen-jquery //= require_tree . //= require turbo links
当我点击链接并呈现视图时，我chosen-query （ best_in_place也不起作用）在初始加载中不起作用，但是如果我对页面进行了硬刷新，则它可以正常工作。 下面是我得到的结果的图像：
以下是我希望它看起来的图像：
再次，如果我对页面进行了硬刷新，那么预期的外观会有效，但是在常规redirect_to ...之后不会redirect_to ...
我的下拉列表的代码如下所示：
= select_tag :screen, options_from_collection_for_select(@screens, "id", "name"), id: "screen-selection", prompt: "Jump to screen", class: 'form-control chosen-select', style: "max-width: 250px !important"
在redirect_to它会产生以下HTML：
[...]
…在重新加载硬页后我得到了这个：
[...] Jump to screen- Jump to screen
- tests
在.coffee文件中，我尝试初始化chosen如下：
# enable chosen js $('#screen-selection').chosen({ width: '190px' })
关于我做错的任何想法？
使用turbolinks，javascript只加载一次。 chosen的硬刷新工作原因是整个页面被重新渲染。 单击链接后，turbolinks会劫持请求并将其转换为ajax（而不是整页刷新）。 一旦请求进入，turbolinks只替换页面的body ，使JS处于相同的状态。
要解决此问题，您需要将您选择的初始化程序包装在turbolinks:load事件中
$(document).on('turbolinks:load', function() { $('#screen-selection').chosen({ width: '190px' }) })
有关更多信息，请参阅https://github.com/turbolinks/turbolinks#installing-javascript-behavior
这是我使用Turbolinks 5和jQuery的解决方案：
-
安装gem’jquery-turbolinks’
-
将此.coffee文件添加到您的应用程序： https ： //github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee
-
将它命名为turbolinks-compatibility.coffee
-
在application.js
// =需要jquery
// =需要jquery_ujs
// =需要jquery.turbolinks// =需要turbolinks
// =需要turbolinks兼容性
我非常头疼地想找到一种方法让我的所有JavaScript工作。 首先，我通过以下video尝试使用gem jquery.turbolinks的解决方案： 如何升级到turbolinks 5但我得到了灯箱，用于显示同一页面中的图像无法正常工作。 所以在暂时禁用Turbolinks之前，我需要花更多时间在github页面上，我试试这个：
你需要把它放在javascript需要重新加载页面的每个链接上才能工作。
也许它不是最好的解决方案，但这让我的头痛不那么痛苦。
Turbolinks和jquery有点头疼。 而不是在文档就绪上调用操作，在页面上：加载应该更好，因为使用turbolinks，它不会在您浏览网站时重新加载整个文档。 这样的事情可能有用：
$(document).on('page:load', function() { $('#screen-selection').chosen({ width: '190px' }) }
我试图自己解决这个问题，找到了适合我的解决方案。
我的问题是我有一个带有“引用”function的论坛以供评论。 通过turbolinks 5，我得到了几个事件监听器，并在我的编辑器中最终得到了来自同一评论的四个引号。
我读了幂等，并在这里找到了一个解决方案： 如何使jQuery`bind`或`on`事件处理程序idempotent
我创建（真的复制了）一个全局函数，我在globals.coffee文件中用于事件。
$.fn.event = (name, fn) -> @unbind(name).bind name, fn
它有效。
我的函数看起来像这样：
$('.quote').event 'click', (event) -> do something
对此的所有信誉都归于：提供解决方案的Pointy 。
链接到turbolinks和幂等
这是我做的.. Turbolinks5防止加载多次。
var ready = function () { if ($.turboAlreadyLoaded) { $('#screen-selection').chosen({ width: '190px' }) } $.turboAlreadyLoaded = true; } $(document).ready(ready); $(document).on("turbolinks:load", ready);