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

当我单击 link 并呈现视图时，我的 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 有效，因为整个页面都被重新呈现。单击 link 后，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

Answer 2

Turbolinks 和 jquery 有点头疼。在 page:load 上调用操作文档准备好应该更好，因为使用 turbolinks，它不会在您浏览网站时重新加载整个文档。这样的事情可能会奏效：

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

Answer 3

我非常头疼地想找到一种方法来使我所有的 javascript 正常工作。首先，我按照以下视频尝试使用 gem jquery.turbolinks 的解决方案：How to upgrade to turbolinks 5 but i got lightbox for showing the images in the same page not working properly. So before just disable Turbolinks once and for all, i take more time on the github 页面，然后我尝试这样做：

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

您需要将它放在每个 link 上，其中 javascript 需要重新加载页面才能工作。

也许这不是最好的解决方案，但可以减轻我的头痛。

Answer 4

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

安装gem'jquery-turbolinks'
将此 .coffee 文件添加到您的应用程序： https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee
将其命名为 turbolinks-compatibility.coffee
在 application.js

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

//=require turbolinks
//=require turbolinks-compatibility

Answer 5

我尝试自己解决这个问题并找到了适合我的解决方案。

我的问题是我的论坛具有 "quote" 评论功能。使用 turbolinks 5，我得到了几个事件监听器，最后在我的编辑器中得到了来自同一评论的最多四个引号。

我阅读了关于幂等性的文章并在此处找到了解决方案：How to make jQuery `bind` or `on` event handlers idempotent

我创建（真正复制）了一个全局函数，我在我的 globals.coffee 文件中用于事件。

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

并且有效。

我的函数如下所示：

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

这方面的所有荣誉都归功于：Pointy 提供解决方案的人。

Link to turbolinks and idempotence

Answer 6

这是我所做的.. Turbolinks5 以防止多次加载。

var ready = function () {

   if ($.turboAlreadyLoaded) {

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

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

Answer 7

我尝试自己解决这个问题并找到了适合我的解决方案。我也希望对别人有帮助。

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

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

Rails 5 - turbolinks 5,some JS not loaded on page render

javascript

ruby

jquery

ruby-on-rails

turbolinks