Javascript Rails 5-turbolinks 5，页面呈现中未加载某些JS

我有一个Rails应用程序，最近更新到

5.0.0.RC1

。大部分过渡都很顺利，但我在使用新的涡轮链接时遇到了一些问题。例如，在我的应用程序中，我使用以下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

= 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"

# enable chosen js
$('#screen-selection').chosen({
  width: '190px'
})

$('.quote').event 'click', (event) ->
 do something 

当我点击一个链接并呈现一个视图时，我的

选择的查询

（

最佳位置

也不起作用）在初始加载时不起作用，但如果我对页面进行了硬刷新，它就会起作用。下面是我得到的结果的图像：

这是我想要它的样子：

同样，如果我对页面进行硬刷新，而不是在常规的

重定向到…

我的下拉列表的代码如下所示：

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require best_in_place
//= require tether
//= require bootstrap
//= require chosen-jquery
//= require_tree .
//= require turbo links

= 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"

# enable chosen js
$('#screen-selection').chosen({
  width: '190px'
})

$('.quote').event 'click', (event) ->
 do something 

在

重定向到
后，它会生成以下HTML：

<select name="screen" id="screen-selection" class="form-control chosen-select"  style="max-width: 250px !important">[...]</select>

你知道我做错了什么吗？
对于turbolinks，javascript只加载一次。在硬刷新
时，所选的
有效，因为整个页面被重新呈现。单击链接后，turbolinks会劫持请求并将其转换为ajax请求（而不是整页刷新）。一旦请求进入，turbolinks只会替换页面的
正文
，使JS保持原来的状态

要解决此问题，您需要像这样在
turbolinks:load
事件中包装您选择的初始值设定项

$(document).on('turbolinks:load', function() {
  $('#screen-selection').chosen({
    width: '190px'
  })
})

有关更多信息，请参阅TurboLink和jquery有点令人头痛。与在document ready上调用操作不同，在page:load应该可以更好地工作，因为对于TurboLink，当您浏览网站时，它不会重新加载整个文档。类似的方法可能会奏效：

$(document).on('page:load', function() {
  $('#screen-selection').chosen({
    width: '190px'
  })
}

为了找到一种让我所有的javascript都工作的方法，我感到非常头痛。首先，我通过以下视频尝试使用gemjquery.turbolinks解决方案：但我得到了lightbox，因为它在同一页面中显示的图像工作不正常。因此，在一次性禁用TurboLink之前，我会花更多时间在页面上，并尝试以下方法：

<div data-turbolinks="false">
  <a href="/">Disabled</a>
</div>



您需要将其放在javascript需要重新加载页面才能工作的每个链接上

也许这不是最好的解决方案，但这会让我的头痛减轻。
以下是我使用Turbolinks 5和jQuery的解决方案：

安装gem'jquery turbolinks'

将此.coffee文件添加到您的应用程序：

命名为turbolinks-compatibility.coffee

在application.js

//=需要jquery

//=需要jquery\u ujs

//=需要jquery.turbolinks

//=需要涡轮链路

//=需要涡轮链路兼容性

我试图自己解决这个问题，并找到了一个适合我的解决方案

我的问题是，我有一个论坛，有一个“报价”功能的评论。使用turbolinks 5，我得到了几个事件侦听器，并在我的编辑器中从同一条评论中引用了多达四句话

我阅读了幂等性，在这里找到了一个解决方案：

我在globals.coffee文件中为事件创建（复制）了一个全局函数

$.fn.event = (name, fn) ->
  @unbind(name).bind name, fn

它是有效的

我的函数如下所示：

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require best_in_place
//= require tether
//= require bootstrap
//= require chosen-jquery
//= require_tree .
//= require turbo links

= 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"

# enable chosen js
$('#screen-selection').chosen({
  width: '190px'
})

$('.quote').event 'click', (event) ->
 do something 

所有这些都归功于：谁提供了解决方案

以下是我的工作。。Turbolinks5可防止多次加载

var ready = function () {

   if ($.turboAlreadyLoaded) {

      $('#screen-selection').chosen({
        width: '190px'
      })
   }
$.turboAlreadyLoaded = true;

}
$(document).ready(ready);
$(document).on("turbolinks:load", ready);

我试图自己解决这个问题，并找到了一个适合我的解决方案。我也希望能对其他人有所帮助

(function () {
    $('#screen-selection').chosen({
        width: '190px'
    })
})();

问题是关于“新Turbolinks”（即Turbolinks 5），它实际上破坏了使用“Turbolinks:load”以外事件的应用程序。因此，您建议的方法不再适用于Rails和Turbolinks 5。但是有一个大问题：Turbolinks将页面存储在缓存中，因此您应该确保javascript代码是幂等的，否则页面上可能会有多个选择（或者在其他情况下，多个事件处理程序附加到一个元素）。有关更多信息，请阅读“多个事件处理程序”部分，除非将处理程序附加到文档中，否则无需太多担心。否则，至少在Turbolinks 5中，在没有任何相关处理程序的情况下克隆和恢复了。。。生存。