Rails 5 - turbolinks 5，一些 JS 未在页面呈现时加载

Question

我有一个 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 ... 之后，预期的外观会起作用

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

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

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

…在硬页面重新加载后我得到这个：

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

<div class="chosen-container chosen-container-single" style="width: 190px;" title="" id="screen_selection_chosen"><a class="chosen-single"><span>Jump to screen</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off"></div><ul class="chosen-results"><li class="active-result result-selected" data-option-array-index="0" style="">Jump to screen</li><li class="active-result" data-option-array-index="1" style="">tests</li></ul></div></div>

在 .coffee 文件中，我尝试初始化 chosen 像这样：

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

关于我做错了什么的任何想法？

原文由 Anders 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 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

原文由 patkoperwas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是我使用 Turbolinks 5 和 jQuery 的解决方案：

1. 安装 gem ‘jquery-turbolinks’

2. 将此 .coffee 文件添加到您的应用程序： https ://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee

3. 将其命名为 turbolinks-compatibility.coffee

4. 在 application.js

//=需要jquery

//=需要jquery_ujs

//=需要jquery.turbolinks

//=需要涡轮链接

//=需要turbolinks兼容性

原文由 Pascal 发布，翻译遵循 CC BY-SA 3.0 许可协议