Rails 4: jak używać $ (dokument) .ready () z turbo-linkami

Wystąpił problem w mojej aplikacji Rails 4, próbując uporządkować pliki JS „po torach”. Wcześniej były one rozrzucone po różnych widokach. Zorganizowałem je w osobne pliki i skompilowałem je z potokiem zasobów. Jednak właśnie dowiedziałem się, że „gotowe” zdarzenie jQuery nie uruchamia się przy kolejnych kliknięciach, gdy włączone jest łączenie turbo. Przy pierwszym załadowaniu strony działa. Ale kiedy klikniesz link, nic wewnątrz ready( function($) {nie zostanie wykonane (ponieważ strona nie ładuje się ponownie). Dobre wyjaśnienie: tutaj .

Więc moje pytanie brzmi: jaki jest właściwy sposób, aby upewnić się, że zdarzenia jQuery działają poprawnie, gdy włączone są łącza Turbo? Czy pakujesz skrypty w odbiornik specyficzny dla Railsów? A może szyny mają jakąś magię, która czyni ją niepotrzebną? Dokumenty są nieco niejasne, jak to powinno działać, szczególnie w odniesieniu do ładowania wielu plików za pośrednictwem manifestów, takich jak application.js.

Oto co robię ... CoffeeScript:

ready = ->

  ...your coffeescript goes here...

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

ostatnia linia nasłuchuje na ładowanie strony, co spowoduje wywołanie linków turbo.

Edytuj ... dodając wersję Javascript (na żądanie):

var ready;
ready = function() {

  ...your javascript goes here...

};

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

Edycja 2 ... Dla szyn 5 (Turbolinks 5) page:loadstaje się turbolinks:loadi będzie wystrzeliwany przy pierwszym załadowaniu. Możemy więc wykonać następujące czynności:

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

  ...your javascript goes here...

});

Właśnie dowiedziałem się o innej opcji rozwiązania tego problemu. Jeśli włożysz ten jquery-turbolinksgem będzie wiązać wydarzenia Szyny Turbolinks do document.readyzdarzeń, dzięki czemu można napisać jQuery w zwykły sposób. Po prostu dodajesz jquery.turbolinksbezpośrednio jqueryw pliku manifestu js (domyślnie:) application.js.

Ostatnio znalazłem najbardziej czysty i łatwy do zrozumienia sposób radzenia sobie z tym:

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

LUB

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

EDYCJA
Jeśli delegowałeś zdarzenia powiązane z document, upewnij się, że dołączasz je poza readyfunkcją, w przeciwnym razie odbijają się one przy każdym page:loadzdarzeniu (powodując wielokrotne uruchamianie tych samych funkcji). Na przykład, jeśli masz takie połączenia:

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

Wyjmij je z readyfunkcji, tak jak to:

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

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

Zdarzenia delegowane powiązane z tym wydarzeniem documentnie muszą być powiązane ready.

Znalazłem to w dokumentacji Rails 4 , podobnej do rozwiązania DemoZluka, ale nieco krótszej:

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

LUB

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

Jeśli masz zewnętrzne skrypty, które wywołują $(document).ready()lub nie możesz niepokoić się przepisywaniem wszystkich istniejących skryptów JavaScript, ten klejnot pozwala ci nadal używać $(document).ready()TurboLink: https://github.com/kossnocorp/jquery.turbolinks

Zgodnie z nowymi przewodnikami po szynach poprawnym sposobem jest wykonanie następujących czynności:

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

lub, w coffeescript:

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

Nie słuchaj wydarzenia $(document).readyi zostanie uruchomione tylko jedno wydarzenie. Bez niespodzianek, bez potrzeby używania klejnotu jquery.turbolinks .

Działa to z szynami 4.2 i nowszymi, nie tylko z szynami 5.

UWAGA: Zobacz @ SDP, aby uzyskać czyste, wbudowane rozwiązanie

Naprawiłem to w następujący sposób:

upewnij się, że dołączasz plik application.js, zanim inne pliki js zależne od aplikacji zostaną dołączone, zmieniając kolejność dołączania w następujący sposób:

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

Zdefiniuj funkcję globalną, która obsługuje wiązanie application.js

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

Teraz możesz wiązać takie rzeczy jak:

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

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

Żadne z powyższych nie działa dla mnie, rozwiązałem to nie używając jQuery's $ (document) .ready, ale zamiast tego użyłem addEventListener.

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

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

Musisz użyć:

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

z turbolinks doc .

Albo użyj

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

lub użyj funkcji .on jQuery, aby uzyskać ten sam efekt

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

zobacz tutaj po więcej szczegółów: http://srbiv.github.io/2013/04/06/rails-4-my-first-run-in-with-turbolinks.html

Zamiast używać zmiennej do zapisywania funkcji „gotowości” i wiązania jej ze zdarzeniami, możesz chcieć wywołać readyzdarzenie za każdym razem, gdy zostanie page:loadwyzwolone.

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

Oto, co zrobiłem, aby upewnić się, że rzeczy nie są wykonywane dwukrotnie:

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

Uważam, że używanie jquery-turbolinksklejnotu lub łączenie $(document).readyi / $(document).on("page:load")lub używanie $(document).on("page:change")zachowuje się nieoczekiwanie - szczególnie jeśli jesteś w fazie rozwoju.

Znalazłem następujący artykuł, który był dla mnie świetny i szczegółowo opisałem następujące zastosowania:

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

Pomyślałem, że zostawię to tutaj dla tych, którzy dokonują aktualizacji do Turbolinks 5 : najprostszym sposobem na poprawienie kodu jest przejście z:

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

do:

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

Odniesienie: https://github.com/turbolinks/turbolinks/issues/9#issuecomment-184717346

$(document).ready(ready)  

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

Testowane tak wiele rozwiązań w końcu do tego doszło. Tyle twoich kodów zdecydowanie nie jest wywoływanych dwukrotnie.

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

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

Zazwyczaj wykonuję następujące czynności dla moich projektów z szynami 4:

W application.js

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

Następnie w pozostałych plikach .js zamiast za pomocą $(function (){})I callonInit(function(){})

Najpierw zainstaluj jquery-turbolinksklejnot. A potem nie zapomnij przenieść dołączonych plików JavaScript z końca swojego ciała application.html.erbdo jego <head>.

Jak opisano tutaj , jeśli umieścisz link javascript aplikacji w stopce ze względu na optymalizację prędkości, musisz przenieść go do tagu, aby załadował się przed zawartością w tagu. To rozwiązanie działało dla mnie.

Znalazłem moje funkcje podwoiła się podczas korzystania z funkcji dla readyi turbolinks:loadtak kiedyś,

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

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

W ten sposób twoje funkcje nie podwajają się, jeśli obsługiwane są turbolinki!