Rails 5 - turbolinks 5，一些JS沒有加載頁面渲染

Question

我有一個Rails應用程序，我最近更新到5.0.0.RC1。大部分過渡都很順利，但我在新的Turbolinks上遇到了一些麻煩。在我的應用我的例子中使用這個寶石：

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工作，因爲整個頁面被重新呈現。一旦你點擊一個鏈接，turbolinks劫持請求並將其變成ajax之一（而不是整頁刷新）。一旦請求進入，turbolinks只會替換頁面的body，使JS保持原來的狀態。

要解決這個問題，你需要換你選擇的初始化在turbolinks:load事件像這樣

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

欲瞭解更多信息，請參閱https://github.com/turbolinks/turbolinks#running-javascript-when-a-page-loads

Answer 2

Turbolinks和jQuery是有點頭痛。而不是在準備好的文檔上調用動作，在頁面上：加載應該更好，因爲使用turbolinks，當瀏覽網站時它不會重新加載整個文檔。像這樣的東西可能會工作：

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

Answer 3

我非常頭疼找到一種方法來使我所有的javascript工作。首先，我嘗試使用gem jquery.turbolinks按照以下視頻解決問題：How to upgrade to turbolinks 5但我在同一個頁面中顯示的圖片無法正常顯示。所以，之前只是禁用Turbolinks一勞永逸，我走github頁面上更多的時間和我試試這個：

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

你需要把每一個地方的JavaScript需要重新加載頁面的工作鏈接。

也許這不是最好的解決方案，但這讓我頭痛不痛。

Answer 4

這裏是我的解決方案與Turbolinks 5和jQuery：

1. 安裝寶石 'jQuery的turbolinks'

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

3. 名it turbolinks-compatibility.coffee

4. at application.js

// =要求的jquery
// =需要jquery_ujs
// =需要jquery.turbolinks

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

Answer 5

我試圖自己解決這個問題，並找到了適合我的解決方案。

我的問題是，我有一個論壇與「報價」功能的意見。隨着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 

所有creds這個去：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);