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

HINWEIS: Siehe die Antwort von @SDP für eine saubere, integrierte Lösung

Ich habe es folgendermaßen behoben:

Stellen Sie sicher, dass Sie application.js vor den anderen von der App abhängigen js-Dateien einbeziehen, indem Sie die Reihenfolge der Einschlüsse wie folgt ändern:

// in application.js - Stellen Sie sicher, dass `require_self` vor `require_tree .` steht
//= require_self
//= require_tree .

Definieren Sie eine globale Funktion, die das Binden in application.js behandelt

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

Jetzt können Sie Dinge wie folgt binden:

// in CoffeeScript:
onLoad ->
  $('a.clickable').click => 
    alert('Link wurde geklickt!');

// Entsprechend in JavaScript:
onLoad(function() {
  $('a.clickable').click(function() {
    alert('Link wurde geklickt');
});

Answer 2

Keiner der oben genannten Lösungen funktioniert für mich. Ich habe das Problem gelöst, indem ich jQuery's $(document).ready nicht verwendet und stattdessen addEventListener verwendet habe.

document.addEventListener("turbolinks:load", function() {
  // etwas machen
});

Answer 3

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

Answer 4

Sie müssen verwenden:

document.addEventListener("turbolinks:load", function() {
  // dein Code hier
})

von den Turbolinks-Dokumenten.

Answer 5

Verwenden Sie entweder den

$(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 Details finden Sie hier: http://srbiv.github.io/2013/04/06/rails-4-my-first-run-in-with-turbolinks.html