Accentsconagua

Verwenden von unauffälligem JavaScript und AJAX mit Rails 3

Code
Share

Wie ich bereits in meinem vorherigen Ruby on Rails-Tutorial erwähnt habe, ist Unobtrusive JavaScript (UJS) eines der coolsten neuen Features in Rails 3. Mit UJS können Sie mit Rails generierten Code viel sauberer machen und Ihre JavaScript-Logik von Ihren HTML-Layouts trennen Rails aus der Prototyp-JavaScript-Bibliothek. In diesem Tutorial werden wir uns diese Funktionen ansehen und lernen, wie sie in einer einfachen Rails 3-Anwendung verwendet werden.

Hintergrund: Was ist unauffälliges JavaScript?

Was genau ist UJS? UJS ist einfach JavaScript, das von Ihrem HTML-Markup getrennt ist. Der einfachste Weg, UJS zu beschreiben, ist ein Beispiel. Nimm einen Onclick-Event-Handler. Wir könnten es aufdringlich hinzufügen:

 Verknüpfung

Oder wir fügen es unauffällig hinzu, indem wir das Ereignis an den Link anhängen (in diesem Beispiel mit jQuery):

 Verknüpfung

Wie in meiner Einführung erwähnt, bietet diese zweite Methode eine Reihe von Vorteilen, darunter ein einfacheres Debugging und sauberer Code.

"Rails 3 dagegen ist ein JavaScript-Framework-Agnostiker. Mit anderen Worten, Sie können Ihr JavaScript-Framework Ihrer Wahl verwenden, vorausgesetzt, es gibt eine Rails UJS-Implementierung für dieses Framework."

Bis zur Version 3 erzeugte Ruby on Rails auffälliges JavaScript. Der resultierende Code war nicht sauber, aber noch schlimmer, er war eng an das JavaScript-Framework von Prototype gekoppelt. Dies bedeutet, dass Sie die Prototypbibliothek mit den JavaScript-Hilfemethoden von Rail verwenden mussten, wenn Sie kein Plugin oder gehackte Rails erstellt haben.

Rails 3 dagegen ist ein JavaScript-Framework-Agnostiker. Mit anderen Worten, Sie können Ihr JavaScript-Framework Ihrer Wahl verwenden, vorausgesetzt, es gibt eine Rails UJS-Implementierung für dieses Framework. Die aktuellen UJS-Implementierungen umfassen Folgendes:

  • Prototyp (Standard)
  • jQuery
  • MooTools

Rails 3 implementiert nun alle seine JavaScript Helper-Funktionen (AJAX-Übermittlungen, Bestätigungsaufforderungen usw.) unauffällig, indem die folgenden HTML 5-Attribute zu HTML-Elementen hinzugefügt werden.

  • Datenmethode - Die REST-Methode, die in Formularsendungen verwendet werden soll.
  • Datenbestätigung - Die Bestätigungsmeldung, die verwendet werden soll, bevor eine Aktion ausgeführt wird.
  • data-remote - wenn wahr, über AJAX einreichen.
  • data-disable-with - Deaktiviert Formularelemente während einer Formularübermittlung

Zum Beispiel dieses Link-Tag

 Zerstören

würde eine AJAX-Löschanfrage senden, nachdem der Benutzer gefragt wurde: "Sind Sie sicher?".

Sie können sich vorstellen, wie viel schwieriger zu lesen wäre, wenn JavaScript nur inline wäre.

Nachdem wir UJS und die Implementierung von Rails durch UJS überprüft haben, erstellen wir ein Projekt und schauen uns einige spezielle Anwendungen an. In diesem Lernprogramm verwenden wir die jQuery-Bibliothek und die UJS-Implementierung.

Schritt 1: Einrichten des Projekts

Da wir ein neues Projekt von Grund auf erstellen, müssen Sie als Erstes das Projekt erstellen, indem Sie Folgendes eingeben:

 Schienen neues Blog --skip-Prototyp

Beachten Sie, dass ich Rails anweise, die prototypische JavaScript-Datei zu überspringen, da ich die jQuery-Bibliothek verwenden werde.

Lassen Sie uns den Server nur starten, um sicherzustellen, dass alles zu funktionieren scheint.

Und voila!

Nachdem wir unser Projekt eingerichtet haben, müssen wir jQuery und die jQuery UJS zu unserem Projekt hinzufügen. Sie können Ihr JavaScript beliebig organisieren, wie Sie möchten. Die Rails-Konvention zum Strukturieren Ihrer JavaScript-Dateien sieht jedoch wie folgt aus (alle diese Dateien gehören zu public / javascripts):

  • Framework-JavaScript-Datei (jquery.js, prototype.js oder mootools.js)
  • rails.js - der Code zur Implementierung von Rails UJS (für das von Ihnen gewählte Framework)
  • application.js - Ihre Anwendung JavaScript

Wenn Sie dies noch nicht getan haben, laden Sie jquery.js (oder beziehen Sie sich auf ein CDN) und rails.js und fügen Sie sie in Ihre public / javascripts Verzeichnis.

Das letzte, was wir tun müssen, ist, Rails mitzuteilen, dass diese js-Dateien auf jeder unserer Seiten enthalten sein sollen. Öffnen Sie dazu die Datei application.rb in Ihrem Konfigurationsverzeichnis und fügen Sie die folgende Zeile hinzu

 config.action_view.JavaScript_expansions [: defaults] =% w (Jquery-Rail-Anwendung)

Dieses Konfigurationselement weist Rails an, die drei oben genannten JavaScript-Dateien standardmäßig einzuschließen.

Alternativ können Sie jQuery von einem CDN (d. H. Http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js) abrufen, indem Sie manuell ein Skripttag einfügen, das auf den richtigen Speicherort zeigt. Wenn Sie dies tun, müssen Sie unbedingt 'jquery' aus dem Konfigurationselement JavaScript_expansions entfernen.

Schritt 2: Code generieren

Um die UJS-Funktionalität von Rails zu demonstrieren, müssen wir zunächst mit etwas Code arbeiten. Für diese Demo haben wir nur ein einfaches Post-Objekt. Lassen Sie uns das jetzt generieren

 Schienen erzeugen Gerüst Beitragsname: String-Titel: String-Inhalt: Text

Und dann lass uns unsere Datenbank migrieren, um die Posts-Tabelle zu erstellen.

 rake db: migrieren

Ok, es geht uns gut! Wenn wir zu navigieren http: // localhost: 3000 / posts / new, Wir sollten ein Formular sehen, um einen neuen Beitrag zu erstellen.

Ok, es funktioniert alles! Schauen wir uns nun an, wie Sie die in Rails eingebaute UJS- und AJAX-Funktionalität nutzen können.

Schritt 3: Hinzufügen von AJAX

Nachdem nun alle erforderlichen JavaScript-Dateien enthalten sind, können wir mit Rails 3 einige AJAX-Funktionen implementieren. Sie können zwar jedes benutzerdefinierte JavaScript schreiben, das Sie möchten, aber Rails bietet einige integrierte Methoden, mit denen Sie AJAX-Aufrufe und andere JavaScript-Aktionen problemlos ausführen können.

Schauen wir uns ein paar häufig verwendete Schienenhelfer und das von ihnen generierte JavaScript an

AJAX-Formularübergabe und Javascript-ERB-Dateien

Wenn Sie sich das Formular für Beiträge ansehen, können wir feststellen, dass das Formular bei jeder Erstellung oder Bearbeitung eines Beitrags manuell übermittelt wird und wir dann zu einer schreibgeschützten Ansicht dieses Beitrags umgeleitet werden. Was wäre, wenn wir dieses Formular über AJAX senden wollten, anstatt eine manuelle Übermittlung zu verwenden?

Rails 3 macht es einfach, jede Form in AJAX umzuwandeln. Öffnen Sie zuerst Ihre _form.html.erb teilweise in app / views / posts, und ändern Sie die erste Zeile von:

 <%= form_for(@post) do |f| %>

zu

 <%= form_for(@post, :remote => wahr) do | f | %>

Vor Rails 3 hinzufügen : remote => true hätte in dem form-Tag eine Reihe von Inline-JavaScript generiert, bei Rails 3 UJS besteht die einzige Änderung darin, ein benutzerdefiniertes HTML 5-Attribut hinzuzufügen. Kannst du es erkennen?

Das Attribut lautet data-remote = "true", und das Rails UJS JavaScript bindet sich an alle Formulare mit diesem Attribut und übermittelt diese über AJAX anstelle eines herkömmlichen POST.

Das ist alles, was Sie für das AJAX-Senden benötigen, aber wie führen wir einen Rückruf durch, nachdem der AJAX-Anruf zurückgegeben wurde?

Die gebräuchlichste Art, eine Rückgabe von einem AJAX-Aufruf zu verarbeiten, ist die Verwendung von JavaScript-ERB-Dateien. Diese funktionieren genau wie Ihre normalen ERB-Dateien, enthalten jedoch JavaScript-Code anstelle von HTML. Lass es uns ausprobieren.

Als erstes müssen wir unserem Controller mitteilen, wie er auf AJAX-Anfragen reagieren soll. Im posts_controller.rb (App / Controller) Wir können unseren Controller anweisen, auf eine AJAX-Anfrage durch Hinzufügen zu antworten 

 format.js

in jedem respons_to blockieren dass wir über AJAX anrufen. Zum Beispiel könnten wir die Erstellungsaktion folgendermaßen aktualisieren: 

 def create @post = Post.new (params [: post]) respons_to | format | if @ post.save format.html redirect_to (@post,: notice => 'Beitrag erstellt.') format.js other format.html render: action => "neu" format.js end end end

Da wir im respons_to-Block keine Optionen angegeben haben, reagiert Rails auf JavaScript-Anforderungen, indem er a lädt .js ERB mit demselben Namen wie die Controller-Aktion (in diesem Fall create.js.erb).

Da unser Controller nun mit AJAX-Anrufen umgehen kann, müssen wir unsere Ansichten erstellen. Für das aktuelle Beispiel add create.js.erb in deiner App / Ansichten / Beiträge Verzeichnis. Diese Datei wird gerendert und das JavaScript wird ausgeführt, wenn der Aufruf beendet ist. Im Moment überschreiben wir einfach das Formular-Tag mit dem Titel und Inhalt des Blogbeitrags:

 $ ('body'). html ("
<%= escape_javaScript(@post.title) %>
") .append ("<%= escape_javaScript(@post.content) %>");

Wenn wir jetzt einen neuen Beitrag erstellen, wird folgendes auf dem Bildschirm angezeigt. Erfolg!

Der Vorteil dieser Methode besteht darin, dass Sie Ruby-Code, den Sie in Ihrem Controller eingerichtet haben, mit Ihrem JavaScript durchsetzten können, sodass Sie die Ansicht mit den Ergebnissen einer Anfrage wirklich problemlos bearbeiten können.

AJAX-Rückrufe mit benutzerdefinierten JavaScript-Ereignissen

Jede Rails UJS-Implementierung bietet auch eine andere Möglichkeit, unseren AJAX-Aufrufen Callbacks hinzuzufügen - benutzerdefinierte JavaScript-Ereignisse. Schauen wir uns ein anderes Beispiel an. Auf unserer Beiträge Indexansicht (http: // localhost: 3000 / posts /), können wir sehen, dass jeder Beitrag über einen Link zum Löschen gelöscht werden kann.

AJAXify unseren Link durch Hinzufügen von: remote => true und zusätzlich eine CSS-Klasse, damit wir diesen POST mithilfe eines CSS-Selektors leicht finden können.

 <%= link_to 'Destroy', post, :confirm => 'Bist du sicher?',: Method =>: delete,: remote => true,: class => 'delete_post'%>

Was ergibt die folgende Ausgabe:

 Zerstören

Jeder UJS-AJAX-Aufruf der Rails bietet sechs benutzerdefinierte Ereignisse, an die angehängt werden kann:

  • Ajax: vor - kurz vor ajax anruf
  • Ajax: Laden - vor dem Ajax-Aufruf, aber nachdem das XmlHttpRequest-Objekt erstellt wurde
  • Ajax: Erfolg - Erfolgreicher Ajax-Aufruf
  • Ajax: Misserfolg - Ajax-Anruf fehlgeschlagen
  • Ajax: abgeschlossen - Abschluss des Ajax-Aufrufs (nach Ajax: Erfolg und Ajax: Fehler)
  • Ajax: nach - nachdem ajax anruf gesendet wurde (hinweis: nicht nachdem er zurückgekehrt ist)

In unserem Fall fügen wir der Ereignisliste einen Listener hinzu Ajax: Erfolg Ereignis auf unseren Lösch-Links, und lassen Sie den gelöschten Beitrag ausblenden, anstatt die Seite neu zu laden. Wir fügen der Datei application.js das folgende JavaScript hinzu.

 $ ('. delete_post'). bind ('ajax: success') function () $ (this) .closest ('tr'). fadeOut (););

Wir müssen unserem posts_controller auch mitteilen, dass er nicht versuchen soll, eine Ansicht zu rendern, nachdem der Beitrag gelöscht wurde.

 def @einst zerstören = post.find (params [: id]) @ post.destroy antworten_auf | formatieren | format.html redirect_to (posts_url) format.js render: nothing => true end

Wenn wir jetzt einen Beitrag löschen, wird er allmählich ausgeblendet.

Fazit

Nun, da hast du es. Jetzt wissen Sie, wie Sie AJAX-Anrufe mit Rails 3 UJS tätigen. Während die erläuterten Beispiele einfach waren, können Sie dieselben Techniken verwenden, um Ihrem Projekt alle Arten von Interaktivität hinzuzufügen. Ich hoffe, Sie stimmen zu, dass dies eine große Verbesserung gegenüber früheren Versionen darstellt und Sie es bei Ihrem nächsten Rails-Projekt ausprobieren werden.

Welche Techniken verwenden Sie bei der Implementierung von AJAX in Rails??

Code
×