Schienen 4: Verwendung von $ (document) .ready () mit Turbo-Links

Ich bin auf ein Problem in meiner Rails 4-App gestoßen, als ich versucht habe, JS-Dateien "auf Rails-Weise" zu organisieren. Sie waren zuvor über verschiedene Ansichten verstreut. Ich habe sie in separaten Dateien organisiert und mit der Assets-Pipeline kompiliert. Ich habe jedoch gerade erfahren, dass das "ready" -Ereignis von jQuery bei nachfolgenden Klicks nicht ausgelöst wird, wenn die Turboverknüpfung aktiviert ist. Wenn Sie eine Seite zum ersten Mal laden, funktioniert sie. Wenn Sie jedoch auf einen Link klicken, wird nichts innerhalb des Links ready( function($) {ausgeführt (da die Seite nicht erneut geladen wird). Gute Erklärung: hier .

Meine Frage lautet also: Wie kann ich sicherstellen, dass jQuery-Ereignisse ordnungsgemäß funktionieren, während Turbo-Links aktiviert sind? Schließen Sie die Skripte in einen Rails-spezifischen Listener ein? Oder hat Rails vielleicht etwas Magie, die es unnötig macht? Die Dokumente sind etwas vage, wie dies funktionieren soll, insbesondere im Hinblick auf das Laden mehrerer Dateien über die Manifeste wie application.js.

Folgendes mache ich ... CoffeeScript:

ready = ->

  ...your coffeescript goes here...

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

Die letzte Zeile wartet auf das Laden der Seite, was durch Turbo-Links ausgelöst wird.

Bearbeiten ... Hinzufügen einer Javascript-Version (auf Anfrage):

var ready;
ready = function() {

  ...your javascript goes here...

};

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

Edit 2 ... For Rails 5 (Turbolinks 5) page:loadwird turbolinks:loadund wird sogar beim ersten Laden ausgelöst. Wir können also einfach Folgendes tun:

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

  ...your javascript goes here...

});

Ich habe gerade von einer anderen Möglichkeit zur Lösung dieses Problems erfahren. Wenn Sie den jquery-turbolinksEdelstein laden , werden die Rails Turbolinks-Ereignisse an die document.readyEreignisse gebunden, sodass Sie Ihre jQuery auf die übliche Weise schreiben können. Sie fügen einfach jquery.turbolinksdirekt danach jqueryin die js-Manifestdatei ein (standardmäßig :) application.js.

Kürzlich fand ich die sauberste und leicht verständlichste Art, damit umzugehen:

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

ODER

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

BEARBEITEN
Wenn Sie Ereignisse delegiert haben , die an die gebunden sind document, stellen Sie sicher, dass Sie sie außerhalb der readyFunktion anhängen. Andernfalls werden sie bei jedem page:loadEreignis neu generiert (wodurch dieselben Funktionen mehrmals ausgeführt werden). Zum Beispiel, wenn Sie solche Anrufe haben:

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

Nehmen Sie sie wie folgt aus der readyFunktion heraus:

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

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

An das Ereignis gebundene delegierte Ereignisse documentmüssen nicht an das readyEreignis gebunden sein .

Fand dies in der Rails 4-Dokumentation , ähnlich der DemoZluk-Lösung, aber etwas kürzer:

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

ODER

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

Wenn Sie externe Skripte haben, die aufrufen, $(document).ready()oder wenn Sie nicht die Mühe haben, Ihr gesamtes vorhandenes JavaScript neu zu schreiben, können Sie dieses Juwel weiterhin $(document).ready()mit TurboLinks verwenden: https://github.com/kossnocorp/jquery.turbolinks

Gemäß den neuen Schienenführungen ist der richtige Weg, Folgendes zu tun:

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

oder in Kaffeeskript:

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

Hören Sie nicht auf das Ereignis $(document).readyund es wird nur ein Ereignis ausgelöst. Keine Überraschungen, keine Notwendigkeit, das Juwel jquery.turbolinks zu verwenden .

Dies funktioniert mit Schienen 4.2 und höher, nicht nur mit Schienen 5.

HINWEIS: Eine saubere, integrierte Lösung finden Sie in der Antwort von @ SDP

Ich habe es wie folgt behoben:

Stellen Sie sicher, dass Sie application.js einschließen, bevor die anderen app-abhängigen js-Dateien aufgenommen werden, indem Sie die Einschlussreihenfolge wie folgt ändern:

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

Definieren Sie eine globale Funktion, die die Bindung in verarbeitet application.js

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

Jetzt können Sie Dinge binden wie:

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

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

Keines der oben genannten Verfahren funktioniert für mich. Ich habe dieses Problem gelöst, indem ich nicht jQuerys $ (document) .ready verwendet habe, sondern stattdessen addEventListener verwendet habe.

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

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

Sie müssen verwenden:

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

von turbolinks doc .

Verwenden Sie entweder die

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

oder verwenden Sie die .on-Funktion von jQuery, um den gleichen Effekt zu erzielen

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

Weitere Informationen finden Sie hier: http://srbiv.github.io/2013/04/06/rails-4-my-first-run-in-with-turbolinks.html

Anstatt eine Variable zu verwenden, um die Funktion "Bereit" zu speichern und an die Ereignisse zu binden, möchten Sie das Ereignis möglicherweise readybei jedem Auslösen auslösen page:load.

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

Folgendes habe ich getan, um sicherzustellen, dass die Dinge nicht zweimal ausgeführt werden:

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

Ich finde, dass sich das Verwenden des jquery-turbolinksEdelsteins oder das Kombinieren $(document).readyund / $(document).on("page:load")oder Verwenden $(document).on("page:change")von sich selbst unerwartet verhält - insbesondere, wenn Sie sich in der Entwicklung befinden.

Ich habe den folgenden Artikel gefunden, der für mich hervorragend funktioniert hat, und die Verwendung des folgenden Artikels detailliert beschrieben:

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

Ich dachte, ich würde dies hier für diejenigen lassen, die auf Turbolinks 5 aktualisieren : Der einfachste Weg, Ihren Code zu reparieren, ist:

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

zu:

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

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

$(document).ready(ready)  

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

Getestet kamen so viele Lösungen schließlich dazu. So viele dein Code wird definitiv nicht zweimal aufgerufen.

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

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

Normalerweise mache ich für meine Rails 4-Projekte Folgendes:

Im application.js

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

Dann in den restlichen .js-Dateien, anstatt zu verwenden, $(function (){})rufe ich aufonInit(function(){})

Installieren Sie zuerst jquery-turbolinksgem. Und vergessen Sie dann nicht, Ihre enthaltenen Javascript-Dateien vom Ende Ihres Körpers auf das application.html.erbzu verschieben <head>.

Wenn Sie, wie hier beschrieben , den Javascript-Link der Anwendung aus Gründen der Geschwindigkeitsoptimierung in die Fußzeile eingefügt haben, müssen Sie ihn in das Tag verschieben, damit er vor dem Inhalt des Tags geladen wird. Diese Lösung hat bei mir funktioniert.

Ich fand meine Funktionen verdoppelt , wenn eine Funktion für die Verwendung readyund turbolinks:loadso habe ich,

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

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

Auf diese Weise verdoppeln sich Ihre Funktionen nicht, wenn Turbolinks unterstützt werden!