Rails 5 - turbolinks 5，一些JS没有在页面上加载渲染 [英] Rails 5 - turbolinks 5,some JS not loaded on page render

问题描述

我有一个Rails应用程序，我最近更新到 5.0.0.RC1 。大多数过渡进展顺利，但我在使用新的Turbolinks时遇到了一些麻烦。在我的应用程序中我例如使用此gem：

I have a Rails app, I recently updated to 5.0.0.RC1. Most of the transition went smooth, but I'm having some trouble with the new Turbolinks. In my app I for example use this 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

当我点击一个链接并渲染一个视图时 selected-query （ best_in_place 也不起作用）在初始加载时不起作用，但如果我对页面进行硬刷新然后就可以了。下面是我得到的结果的图像：

When I click on a link and render a view my chosen-query (best_in_place doesn't work as well) doesn't work in the initial load, but if I make a hard refresh of the page then it works. Below is an image of the result I'm getting:

以下是我希望它的外观图像：

And here is an image of how I want it to look:

同样，如果我对页面进行硬刷新，预期效果会有效，但是在常规 redirect_to ...

Again, the expected look works if I make a hard refresh of the page, but not after a regular redirect_to ...

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

The code for my dropdown looks like this:

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

After a redirect_to it results in the following HTML:

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

...在重新加载硬页后我得到了这个：

... and after a hard page reload I get this:

<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 文件中，我尝试初始化选择，如下所示：

In a .coffee file I try to initialise chosen like this:

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

关于我做错的任何想法？

Any ideas on what I'm doing wrong?

推荐答案

使用turbolinks，javascript只加载一次。在硬刷新选择时，因为整个页面被重新渲染。单击链接后，turbolink会劫持请求并将其转换为ajax（而不是整页刷新）。一旦请求进入，turbolinks只替换页面的正文，让JS保持原状。

With turbolinks the javascript is only loaded once. On the hard refresh chosen works because the entire page is re-rendered. Once you click a link, turbolinks hijacks the request and turns it into an ajax one (instead of a full page refresh). Once the request comes in, turbolinks only replaces the body of the page, leaving the JS in the same state it was.

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

To fix this you will need to wrap your chosen initializer in the turbolinks:load event like so

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

有关详细信息，请参阅 https://github.com/turbolinks/turbolinks#installing-javascript-behavior

For more information, see https://github.com/turbolinks/turbolinks#installing-javascript-behavior

这篇关于Rails 5 - turbolinks 5，一些JS没有在页面上加载渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！