Решение: $(document).ready() в Rails 4 при включенных turbo-links

Быстрый ответ

Для корректной инициализации событий JavaScript при применении TurboLinks в Rails 4, воспользуйтесь событием turbolinks:load следующим образом:

$(document).on('turbolinks:load', function() {
  // Здесь производится инициализация скриптов...
});

Особенности работы с TurboLinks

При использовании TurboLinks и jQuery необходимо уделять особое внимание привязке событий, идемпотентности выполнения кода и правильной организации файлов.

Присоединение событий к TurboLinks

Традиционное событие $(document).ready может не срабатывать из-за TurboLinks. Вместо него используйте событие page:load в комбинации с jQuery для Rails 4. Интересно отметить, что название TurboLinks обусловлено его способностью буквально "связывать" страницу с пользователем мгновенно.

$(document).on('page:load', function() {
  // Ваш jQuery работает с максимальной скоростью!
});

Подробнее об этом расскажет наш спикер на видео

Предотвращение повторного присоединения событий

Стремитесь избегать многократной привязки одних и тех же событий при переходе между страницами для оптимизации производительности.

if (!eventAlreadyBound) {
  // Здесь производится привязка события единожды.
}

Использование gem 'jquery.turbolinks'

Обратите внимание на библиотеку jquery.turbolinks, хотя она и устарела, но по-прежнему может быть полезной при решении конфликтов между TurboLinks и jQuery.

//= require jquery.turbolinks
// Этот gem поможет решить проблемы совместимости.

Адаптация скриптов под TurboLinks

Перепишите свои скрипты таким образом, чтобы они корректно работали с TurboLinks, не зависимо от события 'ready'.

$(document).on('turbolinks:load', function() {
  // Здесь начинается новая эра работы с TurboLinks!
});

Комплексная обработка событий

Сочетание событий $(document).on('ready page:load') позволяет универсально решать вопросы обработки первоначальной загрузки страницы и её обновлений при использовании TurboLinks.

$(document).on('ready page:load', function() {
  // Готовы к работе в любых обстоятельствах!
});

Организация файлов в asset pipeline

Рекомендуется чётко структурировать загрузку ваших JavaScript-файлов через главный манифест application.js.

//= require_tree .
// Этот комментарий символизирует бесшумную работу файлов JavaScript, ведь они сами не могут "говорить".

Расширенные возможности использования TurboLinks

RDetailed understanding работы с TurboLinks в различных версиях Rails, эффективном взаимодействии с событиями и помощниками Rails, может значительно улучшить опыт пользователя.

Применение TurboLinks разных версий

При использовании Rails 4.2 и более новых версий рекомендуется использовать событие turbolinks:load для непрерывной работы событий jQuery.

$(document).on('turbolinks:load', function() {
  // Совместная работа jQuery и TurboLinks принесет только пользу.
});

Эффективность скриптов

Ниже описан способ написания скриптов, которые идеально сочетаются с экосистемой TurboLinks.

$(document).on('turbolinks:load', function() {
  // Ваши скрипты обретут надёжность и эффективность!
});

Практические советы

Следуйте стилистическим канонам JavaScript в соответствии с руководствами Rails или используйте дополнительные образовательные ресурсы.

$(document).on('turbolinks:load', function() {
  // Когда мы в мире Rails, ведём себя соответствующе.
});

Визуализация

Представьте, что благодаря TurboLinks страница готова мгновенно и не требует явного уведомления через $(document).ready():

"🚂 Все на борт! Поезд DOM готов отправиться со станции Document!"

При использовании события turbolinks:load мы имеем следующую ситуацию:

document.addEventListener("turbolinks:load", function() {
  // 🚀 Мы достигли конечной станции – запускаем скрипты НЕМЕДЛЕННО!
});

Полезные материалы

1. Работа с JavaScript в Rails — Руководства Ruby on Rails
2. Turbo: Скорость одностраничного приложения без необходимости писать JavaScript.
3. GitHub – turbolinks/turbolinks: Turbolinks делает навигацию по вашему веб-приложению быстрее.
4. javascript – Rails 4: как использовать $(document).ready() с TurboLinks – Stack Overflow
5. #390 Turbolinks – RailsCasts
6. thoughtbot
7. GitHub – kossnocorp/jquery.turbolinks: 💀 Устаревший ⚠️ Плагин jQuery для исправления привязанных событий, вызванных Turbolinks.