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

Вот что я делаю ... 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 gem, он свяжет события 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
});

ИЗМЕНИТЬ
Если у вас есть делегированные события привязаны к 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

OR

$(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')
});

или в coffeescript:

$(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 $ (document) .ready, а вместо этого использовал addEventListener.

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

Вы должны использовать:

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

из документа turbolinks.

Либо используйте

$(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 всякий раз, когда срабатывает 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)

to:

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

Ссылка: https://github.com/turbolinks/turbolinks/issues/9#issuecomment-184717346

Протестировано так много решений, наконец, пришло к этому. Таким образом, ваш код определенно не вызывается дважды.

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

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

Для своих проектов rails 4 я обычно делаю следующее:

In application.js

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

Затем в остальных файлах .js вместо использования $(function (){}) я вызываю onInit(function(){})

Сначала установите jquery-turbolinks gem. И затем не забудьте переместить включенные файлы 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);
};

Таким образом, ваши функции не удваиваются, если поддерживается турболинка!