Rails 4: як використовувати $ (document) .ready () з турбо-посиланнями

Я зіткнувся з проблемою в моєму додатку Rails 4, намагаючись впорядкувати файли JS "в напрямку рейки". Раніше вони були розкидані по-різному. Я організував їх в окремі файли і склав їх із конвеєра активів. Однак я тільки що дізнався, що подія "готового" jQuery не спрацьовує при наступних клацаннях, коли ввімкнено турбозв'язку. Перший раз, коли ви завантажуєте сторінку, вона працює. Але при натисканні на посилання все, що знаходиться всередині ready( function($) {, не буде виконано (оскільки сторінка насправді не завантажується знову). Гарне пояснення: ось .

Отже, моє запитання: який правильний спосіб забезпечити належну роботу подій jQuery під час включення турбо-посилань? Чи ви загортаєте сценарії у слухача, орієнтованого на Rails? А може, у рейок є якась магія, яка робить її непотрібною? Документи трохи розпливчасті щодо того, як це має працювати, особливо стосовно завантаження декількох файлів через маніфест (и), такі як application.js.

Ось що я роблю ... CoffeeScript:

ready = ->

  ...your coffeescript goes here...

$(document).ready(ready)
$(document).on('page:load', ready)

останній рядок прослуховує завантаження сторінки, що викликає турбо посилання.

Редагувати ... додавання версії Javascript (за запитом):

var ready;
ready = function() {

  ...your javascript goes here...

};

$(document).ready(ready);
$(document).on('page:load', ready);

Редагувати 2 ... Для Rails 5 (Turbolinks 5) page:loadстає turbolinks:loadі навіть буде звільнено при початковому навантаженні. Тож ми можемо просто зробити наступне:

$(document).on('turbolinks:load', function() {

  ...your javascript goes here...

});

Я щойно дізнався про інший варіант вирішення цієї проблеми. Якщо ви завантажуєте на jquery-turbolinksдорогоцінний камінь буде пов'язувати події Rails Turbolinks до document.readyподій , так що ви можете написати JQuery звичайним способом. Ви просто додаєте jquery.turbolinksвідразу після цього jqueryу файл маніфесту js (за замовчуванням:) application.js.

Нещодавно я знайшов найбільш чистий і простий для розуміння спосіб поводження з ним:

$(document).on 'ready page:load', ->
  # Actions to do

АБО

$(document).on('ready page:load', function () {
  // Actions to do
});

EDIT
Якщо ви делегували події, прив’язані до document, переконайтеся, що ви приєднали їх поза readyфункцією, інакше вони отримуватимуть відбиток під час кожної page:loadподії (в результаті чого одні й ті самі функції будуть запускатися кілька разів). Наприклад, якщо у вас є такі дзвінки:

$(document).on 'ready page:load', ->
  ...
  $(document).on 'click', '.button', ->
    ...
  ...

Вийміть їх із readyфункції, наприклад:

$(document).on 'ready page:load', ->
  ...
  ...

$(document).on 'click', '.button', ->
  ...

Делеговані події, пов'язані з documentне, не повинні прив'язуватися до readyподії.

Виявлено це в документації на Rails 4 , схоже на рішення DemoZluk, але трохи коротше:

$(document).on 'page:change', ->
  # Actions to do

АБО

$(document).on('page:change', function () {
  // Actions to do
});

Якщо у вас є зовнішні скрипти, які дзвонять, $(document).ready()або якщо вам не вдається переписати всі існуючі JavaScript, то цей дорогоцінний камінь дозволяє продовжувати користуватися $(document).ready()TurboLinks: https://github.com/kossnocorp/jquery.turbolinks

Відповідно до нових напрямних рейок , правильний спосіб полягає в наступному:

$(document).on('turbolinks:load', function() {
   console.log('(document).turbolinks:load')
});

або, у кофескрипті:

$(document).on "turbolinks:load", ->
alert "page has loaded!"

Не слухайте події, $(document).readyі лише одна подія буде звільнена. Немає сюрпризів, не потрібно використовувати дорогоцінний камінь jquery.turbolinks .

Це працює з рейками 4.2 і вище, а не тільки з рельсами 5.

ПРИМІТКА. Див. Відповідь @ SDP щодо чистого, вбудованого рішення

Я зафіксував це так:

переконайтеся, що ви включите application.js до того, як будуть включені інші файли js, залежні від програми, змінивши порядок включення таким чином:

// in application.js - make sure `require_self` comes before `require_tree .`
//= require_self
//= require_tree .

Визначте глобальну функцію, яка обробляє зв'язування в application.js

// application.js
window.onLoad = function(callback) {
  // binds ready event and turbolink page:load event
  $(document).ready(callback);
  $(document).on('page:load',callback);
};

Тепер ви можете пов’язати такі речі, як:

// in coffee script:
onLoad ->
  $('a.clickable').click => 
    alert('link clicked!');

// equivalent in javascript:
onLoad(function() {
  $('a.clickable').click(function() {
    alert('link clicked');
});

Жоден з перерахованих вище для мене не працює, я вирішив це, не використовуючи $ (документ) jQuery. Вже, але замість цього використовую addEventListener.

document.addEventListener("turbolinks:load", function() {
  // do something
});

$(document).on 'ready turbolinks:load', ->
  console.log '(document).turbolinks:load'

Ви повинні використовувати:

document.addEventListener("turbolinks:load", function() {
  // your code here
})

від turbolinks doc .

Або використовуйте

$(document).on "page:load", attachRatingHandler

або скористайтеся функцією jQuery .on для досягнення того ж ефекту

$(document).on 'click', 'span.star', attachRatingHandler

дивіться тут детальніше: http://srbiv.github.io/2013/04/06/rails-4-my-first-run-in-with-turbolinks.html

Замість використання змінної для збереження функції "Ready" та прив'язування її до подій, ви, можливо, захочете запускати readyподію щоразу, коли page:loadтригери.

$(document).on('page:load', function() {
  $(document).trigger('ready');
});

Ось що я зробив, щоб речі не виконувались двічі:

$(document).on("page:change", function() {
     // ... init things, just do not bind events ...
     $(document).off("page:change");
});

Я вважаю, що використання jquery-turbolinksдорогоцінного каміння або комбінування $(document).readyта $(document).on("page:load")використання або $(document).on("page:change")поводження з собою веде себе несподівано - особливо, якщо ти в розробці.

Я знайшов наступну статтю, яка працювала для мене чудово, і детально розповіла про використання наступного:

var load_this_javascript = function() { 
  // do some things 
}
$(document).ready(load_this_javascript)
$(window).bind('page:change', load_this_javascript)

Я подумав, що я залишу це для оновлення до Turbolinks 5 : найпростіший спосіб виправити свій код - це перейти від:

var ready;
ready = function() {
  // Your JS here
}
$(document).ready(ready);
$(document).on('page:load', ready)

до:

var ready;
ready = function() {
  // Your JS here
}
$(document).on('turbolinks:load', ready);

Довідка: https://github.com/turbolinks/turbolinks/isissue/9#issuecomment-184717346

$(document).ready(ready)  

$(document).on('turbolinks:load', ready)

Випробуваний стільки рішення нарешті дійшов до цього. Це багато вашого коду, безумовно, не називається двічі.

      var has_loaded=false;
      var ready = function() {
        if(!has_loaded){
          has_loaded=true;
           
          // YOURJS here
        }
      }

      $(document).ready(ready);
      $(document).bind('page:change', ready);

Зазвичай для своїх рейок я роблю наступне:

В application.js

function onInit(callback){
    $(document).ready(callback);
    $(document).on('page:load', callback);
}

Потім у решті файлів .js замість використання $(function (){})я дзвонюonInit(function(){})

Спочатку встановіть jquery-turbolinksдорогоцінний камінь. І тоді не забудьте перемістити включені Javascript-файли з кінця тіла application.html.erbна його <head>.

Як описано тут , якщо ви з міркувань оптимізації швидкості помістили посилання javascript на додаток у нижньому колонтитулі, вам потрібно буде перемістити його в тег, щоб він завантажився перед вмістом у тезі. Це рішення спрацювало на мене.

Я виявив свої функції вдвічі, коли я використовував функцію, readyі turbolinks:loadтому я використовував,

var ready = function() {
  // you code goes here
}

if (Turbolinks.supported == false) {
  $(document).on('ready', ready);
};
if (Turbolinks.supported == true) {
  $(document).on('turbolinks:load', ready);
};

Таким чином ваші функції не подвоюються, якщо підтримуються турболинки!