Rails 5-turbolinks 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'
})

любые идеи о том, что я делаю неправильно?

10
javascript jquery ruby ruby-on-rails turbolinks

6 ответов

С turbolinks javascript загружается только один раз. На жестком refresh chosen работает, потому что вся страница перестраивается. После нажатия ссылки 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

17

вот мое решение с Turbolinks 5 и jQuery:

  1. установить gem 'jQuery-turbolinks'

  2. добавить .кофе-файл для вашего приложения: https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee

  3. назовите его turbolinks-совместимость.кофе!--1-->

  4. в приложения.js

/ / =требуется jquery
//=требуют jquery_ujs
//=требуется jquery.turbolinks

//=требуют turbolinks
//=требуется Турболинкс-совместимость

8

У меня возникла серьезная головная боль, чтобы найти способ заставить весь мой javascript работать. Сначала я попробую решение с помощью jQuery gem.turbolinks следуя этому видео: Как перейти на turbolinks 5 но у меня есть лайтбокс для показа изображений на той же странице не работает должным образом. Так что прежде чем просто отключить Turbolinks раз и навсегда, я беру больше времени на github страница и я попробовать это: 

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

вам нужно поместить это на каждую ссылку, где требуется javascript перезагрузка страницы для работы.

возможно, это не лучшее решение, но это делает мою головную боль менее болезненной.

1

Turbolinks и jquery-это своего рода головная боль. Вместо вызова действия на документ готов, на странице: загрузка должна работать лучше, потому что с turbolinks он не перезагружает весь документ при просмотре веб-сайта. Что-то вроде этого может сработать:

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

Я пытался решить это сам и нашел решение, которое работает для меня.

моя проблема заключалась в том, что у меня был форум с функциональностью "цитаты" для комментариев. С turbolinks 5 я получил несколько слушателей событий и закончил до четырех цитат из того же комментария в моем редакторе.

Я прочитал об идемпотенции и нашел решение здесь:как сделать обработчики событий jQuery "bind" или " on " идемпотентными

Я создал (скопировал действительно) глобальную функцию который я использую в своих глобалах.кофе файл для событий.

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

и это работает.

мои функции выглядят так:

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

все creds для этого идет к:заостренный, который вынес решение.

ссылка на turbolinks и idempotence

0

вот что я делаю.. Turbolinks5 для предотвращения загрузки несколько раз.

var ready = function () {

   if ($.turboAlreadyLoaded) {

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

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