web-dev-qa-db-ja.com

Rails 5-ターボリンク5、一部のJSがページレンダーにロードされない

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も機能しない）が機能しませんが、ページを強制的に更新すると、動作します。以下は私が得ている結果の画像です：

How it looks now

そして、ここに私がそれをどのように見せたいかというイメージがあります：

enter image description here

繰り返しますが、ページのハードリフレッシュを実行すると期待どおりの外観が機能しますが、通常の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'
})

私が間違っていることについてのアイデアはありますか？

javascriptjqueryruby-on-railsrubyturbolinks
11
Anders

ターボリンクを使用すると、JavaScriptは一度だけロードされます。ハードリフレッシュでは、ページ全体が再レンダリングされるため、chosenは機能します。リンクをクリックすると、turbolinksがリクエストをハイジャックし、それをajaxリクエストに変換します（ページ全体を更新するのではなく）。リクエストが受信されると、ターボリンクはページのbodyのみを置き換え、JSを元の状態のままにします。

これを修正するには、選択したイニシャライザをturbolinks:loadイベントにラップする必要があります。

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

詳細については、 https://github.com/turbolinks/turbolinks#installing-javascript-behavior を参照してください

25
patkoperwas

これが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が必要
// = require jquery_ujs
// = jquery.turbolinksが必要

// =ターボリンクが必要
// =ターボリンクの互換性が必要

8
Pascal

私はすべてのJavaScriptを機能させる方法を見つけるために深刻な頭痛を覚えました。まず、このビデオをフォローして、gem jquery.turbolinksで解決策を試します： ターボリンク5にアップグレードする方法 が、画像を表示するためのライトボックスを取得しました同じページが正しく機能していません。したがって、Turbolinksを一度だけ無効にする前に、 github ページでもっと時間をかけてこれを試してみます：

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

あなたはそれがJavaScriptが機能するためにページのリロードを必要とする各リンクにそれを置く必要があります。

多分それは最善の解決策ではないかもしれませんが、それは私の頭痛の痛みを少なくします。

2
VendezTrouvez

Turbolinksとjqueryはちょっと頭痛の種です。ドキュメント準備完了のアクションを呼び出す代わりに、page：loadはより適切に機能するはずです。ターボリンクが原因で、Webサイトを閲覧するときにドキュメント全体が再ロードされるわけではありません。このような何かがうまくいくかもしれません：

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

これが私がすることです。Turbolinks5は複数回ロードされるのを防ぎます。

var ready = function () {

   if ($.turboAlreadyLoaded) {

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

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

私はこれを自分で解決しようとし、私のために働く解決策を見つけました。

私の問題は、コメントの「引用」機能を備えたフォーラムがあったことです。 turbolinks 5を使用して、いくつかのイベントリスナーを取得し、エディターの同じコメントから最大4つの引用符を取得しました。

べき等を読んで、ここで解決策を見つけました： jQueryを「バインド」または「オン」イベントハンドラをべき等にする方法

イベントのglobals.coffeeファイルで使用するグローバル関数を（本当にコピーして）作成しました。

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

そしてそれは機能します。

私の関数は次のようになります：

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

これに対するすべての信用は、次のようになります。 Pointy 誰がソリューションを提供したか。

ターボリンクとべき等へのリンク

0
Björn Grunde