Rails 4: wie man $(document).ready() mit Turbo-Links verwendet

Question

Ich bin in meinem Rails 4-App auf ein Problem gestoßen, als ich versuchte, JS-Dateien "auf die Rails-Art" zu organisieren. Sie waren zuvor über verschiedene Ansichten verstreut. Ich habe sie in separate Dateien organisiert und mit dem Asset-Pipeline kompiliert. Allerdings habe ich gerade erst gelernt, dass das "ready"-Ereignis von jQuery bei aufeinander folgenden Klicks nicht ausgelöst wird, wenn Turbo-Linking aktiviert ist. Beim ersten Laden einer Seite funktioniert es. Aber beim Klicken auf einen Link wird nichts innerhalb des ready( function($) { ausgeführt (weil die Seite tatsächlich nicht erneut geladen wird). Gute Erklärung: hier.

Also meine Frage ist: Wie kann sichergestellt werden, dass jQuery-Ereignisse ordnungsgemäß funktionieren, während Turbo-Links aktiviert sind? Wrapperst du die Skripte in einem Rails-spezifischen Listener? Oder vielleicht hat Rails irgendeine Magie, die es unnötig macht? Die Dokumentation ist ein wenig vage darüber, wie dies funktionieren sollte, insbesondere in Bezug auf das Laden mehrerer Dateien über die Manifeste wie application.js.

Answer 1

Das ist was ich mache... CoffeeScript:

ready = ->

  ...dein Coffeescript geht hier hin...

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

Die letzte Zeile lauscht auf das Laden der Seite, was Turbo Links auslösen wird.

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

var ready;
ready = function() {

  ...dein Javascript geht hier hin...

};

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

Bearbeiten 2...Für Rails 5 (Turbolinks 5) wird page:load zu turbolinks:load und wird sogar beim initialen Laden ausgelöst. Daher können wir einfach folgendes machen:

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

  ...dein Javascript geht hier hin...

});

Answer 2

Ich habe gerade von einer weiteren Option zur Lösung dieses Problems erfahren. Wenn du das Gem jquery-turbolinks lädst, werden die Rails Turbolinks-Ereignisse mit den document.ready-Ereignissen verbunden, sodass du deinen jQuery-Code auf die übliche Weise schreiben kannst. Du fügst einfach jquery.turbolinks direkt nach jquery in der JavaScript-Manifestdatei (standardmäßig: application.js) hinzu.

Answer 3

Ich habe kürzlich die sauberste und einfachste Möglichkeit gefunden, damit umzugehen:

$(document).on 'ready page:load', ->
  # Aktionen ausführen

ODER

$(document).on('ready page:load', function () {
  // Aktionen ausführen
});

BEARBEITEN
Wenn Sie delegierte Ereignisse am document gebunden haben, stellen Sie sicher, dass Sie sie außerhalb der ready-Funktion anhängen, da sie sonst bei jedem page:load-Ereignis neu gebunden werden (was dazu führt, dass die gleichen Funktionen mehrmals ausgeführt werden). Wenn Sie beispielsweise solche Aufrufe wie diesen haben:

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

Holen Sie sie aus der ready-Funktion heraus, wie hier:

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

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

Delegierte Ereignisse, die am document gebunden sind, müssen nicht am ready-Ereignis gebunden werden.

Answer 4

Das habe ich in der Rails 4-Dokumentation gefunden, ähnlich wie die Lösung von DemoZluk, jedoch etwas kürzer:

$(document).on 'page:change', ->
  # Aktionen ausführen

ODER

$(document).on('page:change', function () {
  // Aktionen ausführen
});

Wenn Sie externe Skripte haben, die $(document).ready() aufrufen, oder wenn Sie sich nicht die Mühe machen möchten, all Ihren vorhandenen JavaScript-Code umzuschreiben, dann ermöglicht Ihnen dieses Paket weiterhin die Verwendung von $(document).ready() mit TurboLinks: https://github.com/kossnocorp/jquery.turbolinks

Answer 5

Gemäß den neuen Rails-Leitfäden sollte man Folgendes tun:

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

oder, in Coffeescript:

$(document).on "turbolinks:load", ->
alert "Seite wurde geladen!"

Nicht auf das Ereignis $(document).ready hören und nur ein Ereignis wird ausgelöst. Keine Überraschungen, kein Bedarf an dem jquery.turbolinks Gem.

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