Wie funktioniert jQuerys „$(document).ready()' mit den Turbo-Links von Rails 4?

Rails 4: Verwendung von jQuerys „$(document).ready()“ mit Turbo-Links-Integration

Während der Arbeit an Rails 4 Bei einer Anwendung stehen Entwickler häufig vor der Notwendigkeit, ihre JavaScript-Dateien effektiv zu organisieren. Traditionell war JavaScript-Code über verschiedene Ansichten verteilt. Ein organisierterer Ansatz besteht jedoch darin, sie in separate Dateien zu kompilieren und die Assets-Pipeline zu nutzen.

Wenn Turbo-Links jedoch aktiviert ist, stößt das jQuery-Ereignis „ready“ auf eine Einschränkung. Bei nachfolgenden Klicks wird das „ready“-Ereignis nicht mehr ausgelöst, was sich auf die Ausführung des Codes innerhalb seines Gültigkeitsbereichs auswirkt. Dieses Problem entsteht dadurch, dass die Seite bei aktivierten Turbo-Links nicht neu geladen wird.

Um dieses Problem zu beheben, muss unbedingt sichergestellt werden, dass jQuery-Ereignisse einwandfrei funktionieren, während Turbo-Links aktiv bleiben. Zwei Ansätze können in Betracht gezogen werden:

Ansatz 1: Event Wrapping mit Rails-spezifischem Listener

Diese Methode beinhaltet das Einschließen von JavaScript-Skripten in einen Rails-spezifischen Listener, um deren effektiv sicherzustellen Ausführung beim Laden der Seite.

Ansatz 2: Verwendung von Turbo-Links Ereignis

Turbo-Links bietet ein bestimmtes Ereignis, „page:load“, das zum Auslösen des erforderlichen JavaScript-Codes verwendet werden kann. Durch die Nutzung dieses Ereignisses können Entwickler das durch nachfolgende Klicks verursachte Problem umgehen.

Für CoffeeScript-Benutzer bietet das folgende Code-Snippet eine Lösung:

ready = ->

  ...your coffeescript goes here...

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

Die letzte Zeile dieses Snippets wartet auf das „page:load“-Ereignis, das Turbo-Links auslöst.

Für JavaScript-Benutzer kann der folgende äquivalente Code sein eingesetzt:

var ready;
ready = function() {

  ...your javascript goes here...

};

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

In Rails 5 wurde mit dem aktualisierten Turbolinks 5 das „page:load“-Ereignis durch „turbolinks:load“ ersetzt, das bereits beim ersten Laden der Seite ausgelöst wird. Dies vereinfacht den Code wie folgt:

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

  ...your javascript goes here...

});

Durch die Implementierung dieser Lösungen können Entwickler effektiv sicherstellen, dass jQuery-Ereignisse trotz des Vorhandenseins von Turbo-Links weiterhin ordnungsgemäß funktionieren.

Das obige ist der detaillierte Inhalt vonWie funktioniert jQuerys „$(document).ready()' mit den Turbo-Links von Rails 4?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!