Rails 4: Jak używać $(document).ready () with turbo-links

Oto co robię... CoffeeScript:

ready = ->

  ...your coffeescript goes here...

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

Ostatni wiersz nasłuchuje wczytywania strony, co spowoduje uruchomienie linków turbo.

Edit ...dodanie wersji Javascript (na żądanie):

var ready;
ready = function() {

  ...your javascript goes here...

};

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

Edycja 2 ...Dla Rails 5 (Turbolinks 5) page:load staje się turbolinks:load i będzie nawet odpalany przy początkowym obciążeniu. Możemy więc po prostu wykonać następujące czynności:

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

  ...your javascript goes here...

});

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
});

EDIT
Jeśli masz delegowane zdarzenia powiązane z document, Upewnij się, że dołączasz je poza funkcją ready, w przeciwnym razie będą one odbijane przy każdym zdarzeniu page:load (powodując wielokrotne uruchamianie tych samych funkcji). Na przykład, jeśli masz jakieś wywołania takie jak:

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

Wyjmij je z funkcji ready, Jak to:

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

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

Zdarzenia delegowane związane z document nie muszą być związane z ready.

Znalazłem to w Rails 4 documentation , podobne do rozwiązania Demozluka, ale nieco krótsze:

$(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 jeśli nie masz problemu z przepisaniem całego istniejącego JavaScript, ten klejnot pozwala Ci używać {[2] } z Turbolinkami: https://github.com/kossnocorp/jquery.turbolinks

Zgodnie z nowymi prowadnicami rails, 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 nasłuchuj zdarzenia $(document).ready i zostanie wywołane tylko jedno zdarzenie. Bez niespodzianek, bez potrzeby używania jquery.turbolinks gem.

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

Uwaga: Zobacz odpowiedź @SDP dla czystego, wbudowanego rozwiązania

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

Upewnij się, że dołączasz aplikację.js zanim inne zależne od aplikacji Pliki JS 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 w 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ć rzeczy takie 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).gotowy, ale zamiast tego użyj addEventListener.

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

Albo użyć

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

Lub użyj jQuery .on funkcja osiągnąć ten sam efekt

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

Zobacz tutaj, aby uzyskać 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 "ready" i wiązania jej ze zdarzeniami, możesz chcieć wywołać zdarzenie ready za każdym razem, gdy page:load wyzwoli.

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

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

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

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

Znalazłem następujący Artykuł , który zadziałał dla mnie świetnie i szczegółowo opisuje zastosowanie:

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 przechodzą 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

Musisz użyć:

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

Z turbolinks doc .

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

$(document).ready(ready)  

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

 <%= link_to 'Edit', edit_article_path(article), 'data-no-turbolink' => true %>

Może możesz użyć tak, aby użyć "ready", to tak jak Zamknij turbolink.

Najpierw zainstaluj jquery-turbolinks gem. Następnie nie zapomnij przenieść dołączonych plików Javascript z końca ciała application.html.erb do jego <head>.

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

Testowane tak wiele rozwiązań w końcu przyszedł do tego. Tyle Twój kod na pewno nie jest wywoływany dwa razy.

      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 rails 4:

W application.js

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

Następnie w pozostałej części .Pliki js, zamiast używać $(function (){}) wywołuję onInit(function(){})