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'
})

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

Answer 1

使用turbolinks,javascript只加载一次.在硬刷新chosen工作,因为整个页面被重新渲染.单击链接后,turbolink会劫持请求并将其转换为ajax(而不是整页刷新).一旦请求进入,turbolinks只替换body页面,使JS处于相同的状态.

要解决此问题,您需要在turbolinks:load事件中包装您选择的初始化程序

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

有关更多信息,请参阅https://github.com/turbolinks/turbolinks#installing-javascript-behavior

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

// = require jquery
// = require jquery_ujs
// = require jquery.turbolinks

// =需要turbolinks
// =需要turbolinks兼容性

Answer 3

我非常头疼要找到一种方法让我的所有 javascript 都能工作。首先，我按照以下视频尝试使用 gem jquery.turbolinks 的解决方案：如何升级到 Turbolinks 5但我在同一页面中显示图像的灯箱无法正常工作。因此，在一劳永逸地禁用 Turbolinks 之前，我在github页面上花费了更多时间，并尝试了以下操作：

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

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

也许这不是最好的解决方案，但这让我的头痛减轻了一些。