Zoals ik in mijn eerdere Ruby on Rails-zelfstudie vermeldde, is Unobtrusive JavaScript (UJS) een van de coolste nieuwe functies in Rails 3. UJS maakt door Rails gegenereerde code veel schoner, helpt je JavaScript-logica scheiden van je HTML-lay-outs en ontkoppelt Rails van de Prototype JavaScript-bibliotheek. In deze zelfstudie gaan we naar deze functies kijken en leren hoe we ze kunnen gebruiken in een eenvoudige Rails 3-toepassing.

---

Achtergrond: Wat is onopvallend JavaScript?

Om te beginnen, wat is UJS precies? Eenvoudig, UJS is JavaScript dat is gescheiden van uw HTML-markup. De eenvoudigste manier om UJS te beschrijven is met een voorbeeld. Neem een ​​onclick event handler; we zouden het opdringerig kunnen toevoegen:

 Link

Of we kunnen het onopvallend toevoegen door de gebeurtenis aan de link te koppelen (met behulp van jQuery in dit voorbeeld):

 Link 

Zoals vermeld in mijn inleiding, heeft deze tweede methode een aantal voordelen, waaronder eenvoudigere foutopsporing en schonere code.

"Rails 3 daarentegen is JavaScript-agnostisch, met andere woorden, u kunt uw JavaScript-framework van keuze gebruiken, mits er een Rails UJS-implementatie bestaat voor dat framework."

Tot en met versie 3 heeft Ruby on Rails opdringerige JavaScript gegenereerd. De resulterende code was niet schoon, maar erger nog, deze was nauw gekoppeld aan het JavaScript-raamwerk van Prototype. Dit betekende dat tenzij je een plug-in of gehackte Rails hebt gemaakt, je de Prototype-bibliotheek met de JavaScript-hulpmethoden van Rail moest gebruiken.

Rails 3, aan de andere kant, is JavaScript-framework agnostisch. Met andere woorden, u kunt uw JavaScript-framework van keuze gebruiken, mits er een Rails UJS-implementatie bestaat voor dat framework. De huidige UJS-implementaties omvatten het volgende:

• Prototype (standaard)
• jQuery
• MooTools

Rails 3 implementeert nu al zijn JavaScript Helper-functionaliteit (AJAX-submits, bevestigingsprompts, enz.) Onopvallend door de volgende aangepaste HTML 5-kenmerken aan HTML-elementen toe te voegen.

• data-methode - de REST-methode die moet worden gebruikt bij het indienen van formulieren.
• data-confirm - het bevestigingsbericht dat moet worden gebruikt voordat een actie wordt uitgevoerd.
• data-remote - indien juist, verzend via AJAX.
• data-uitschakelen-met-uitschakelt formulierelementen tijdens een formulierinzending

Bijvoorbeeld deze koppelingstag

 Vernietigen

zou een AJAX-verwijderingsverzoek verzenden na de gebruiker te vragen: "Weet je het zeker?"

Je kunt je voorstellen hoeveel moeilijker het is om dat te lezen als al dat JavaScript inline was.

Nu we UJS hebben besproken en hoe Rails UJS implementeert, laten we een project opzetten en een aantal specifieke toepassingen bekijken. We zullen de jQuery-bibliotheek en de UJS-implementatie gebruiken in deze zelfstudie.

---

Stap 1: Het project opzetten

Omdat we vanaf het begin een nieuw project maken, is het eerste dat we moeten doen het project maken door het volgende te typen:

 rails nieuwe blog --skip-prototype

Merk op dat ik Rails opdraag het JavaScript-bestand van het prototype over te slaan, omdat ik de jQuery-bibliotheek ga gebruiken.

Laten we de server starten om er zeker van te zijn dat alles lijkt te werken.

En, voila!

Nu we ons project hebben opgezet, moeten we jQuery en de jQuery UJS aan ons project toevoegen. U bent vrij om uw JavaScript te organiseren zoals u dat wilt, maar de Rails-conventie voor het structureren van uw JavaScript-bestanden is als volgt (al deze bestanden worden openbaar gemaakt / javascripts):

• framework JavaScript-bestand (jquery.js, prototype.js of mootools.js)
• rails.js - de code voor het implementeren van rails UJS (voor welk raamwerk je ook hebt gekozen)
• application.js - uw applicatie JavaScript

Download jQuery.JS (of verwijs naar een CDN) en rails.js als je dat nog niet hebt gedaan en voeg ze toe aan je public / javascripts directory.

Het laatste dat we moeten doen om aan de slag te gaan is om Rails te vertellen deze js-bestanden op al onze pagina's op te nemen. Hiervoor opent u application.rb in de map config en voegt u de volgende regel toe

 config.action_view.JavaScript_expansions [: standaardwaarden] =% w (applicatie jQuery-rails)

Dit configuratie-item geeft Rails de opdracht om de drie hierboven genoemde JavaScript-bestanden standaard op te nemen.

Als alternatief zou je jQuery van een CDN kunnen pakken (d.w.z. http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js) door handmatig een scripttag toe te voegen die naar de juiste locatie wijst. Als u dit doet, moet u 'jQuery' verwijderen uit het configuratie-item JavaScript_expansions.

---

Stap 2: Sommige code genereren

Om de UJS-functionaliteit van de rails te demonstreren, moeten we eerst een code hebben om mee te werken. Voor deze demo hebben we gewoon een eenvoudig Post-object. Laten we dat nu genereren

 rails genereren steiger Post naam: string titel: string inhoud: tekst

En laten we dan onze database migreren om de posts-tabel te maken.

 rake db: migreren

Ok, we zijn goed om te gaan! Als we navigeren naar http: // localhost: 3000 / berichten / nieuw, we zouden een formulier moeten zien om een ​​nieuw bericht te maken.

Ok, het werkt allemaal! Laten we nu ingaan en zien hoe u de UJS- en AJAX-functionaliteit gebruikt die in Rails is gebakken.

---

Stap 3: AJAX toevoegen

Nu alle vereiste JavaScript-bestanden zijn opgenomen, kunnen we Rails 3 daadwerkelijk gaan gebruiken om enkele AJAX-functies te implementeren. Hoewel je alle aangepaste JavaScripts die je wilt kunt schrijven, biedt Rails een aantal mooie ingebouwde methoden die je kunt gebruiken om eenvoudig AJAX-aanroepen en andere JavaScript-acties uit te voeren.

Laten we eens kijken naar een paar veel gebruikte rails-helpers en het JavaScript dat ze genereren

AJAX-formulierverzending en Javascript ERB-bestanden

Als we naar ons formulier Berichten kijken, kunnen we zien dat wanneer we een bericht maken of bewerken, het formulier handmatig wordt ingediend en we vervolgens worden omgeleid naar een alleen-lezen weergave van dat bericht. Wat als we dat formulier via AJAX willen indienen in plaats van een handmatige inzending te gebruiken?

Rails 3 maakt het gemakkelijk om elk formulier naar AJAX te converteren. Open eerst uw _form.html.erb gedeeltelijk in app / views / posts, en verander de eerste regel van:

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

naar

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

Voorafgaand aan Rails 3, toevoegen : remote => true zou een aantal inline JavaScript gegenereerd hebben in de form-tag, maar met Rails 3 UJS is de enige wijziging de toevoeging van een HTML 5 aangepast attribuut. Kun je het zien?

Het kenmerk is data-afstand = "true", en de Rails UJS JavaScript bindt zich aan alle vormen met dat kenmerk en verzendt ze via AJAX in plaats van een traditionele POST.

Dat is alles wat nodig is om de AJAX in te dienen, maar hoe kunnen we terugbellen nadat de AJAX-aanroep terugkeert?

De meest gebruikelijke manier om een ​​retour van een AJAX-aanroep af te handelen, is door het gebruik van JavaScript ERB-bestanden. Deze werken precies zoals uw normale ERB-bestanden, maar bevatten JavaScript-code in plaats van HTML. Laten we het proberen.

Het eerste wat we moeten doen is onze controller vertellen hoe te reageren op AJAX-verzoeken. In posts_controller.rb (app / controllers) we kunnen onze controller vertellen om te reageren op een AJAX-verzoek door toe te voegen

 format.js

in elke reageer op blok die we gaan bellen via AJAX. We kunnen bijvoorbeeld de actie maken om er zo uit te zien:

 def create @post = Post.new (params [: post]) response_to do | format | if @ post.save format.html redirect_to (@post,: notice => 'Bericht gemaakt.') format.js else format.html render: action => "new" format.js end end end

Omdat we geen opties hebben opgegeven in het blok reply_to, reageert Rails op JavaScript-verzoeken door a te laden .js ERB met dezelfde naam als de actie van de controller (create.js.erb, in dit geval).

Nu onze controller weet hoe AJAX-oproepen moeten worden afgehandeld, moeten we onze standpunten bepalen. Voeg voor het huidige voorbeeld toe create.js.erb in uw app / views / berichten directory. Dit bestand wordt gerenderd en de JavaScript-code binnenin wordt uitgevoerd wanneer het gesprek is beëindigd. Voor nu overschrijven we de formuliertag eenvoudigweg met de titel en inhoud van de blogpost:

 $ ( 'Body'). Html ("
<%= escape_javaScript(@post.title) %>
") .Append ("<%= escape_javaScript(@post.content) %>");

Als we nu een nieuwe post maken, krijgen we het volgende op het scherm. Succes!

Het voordeel van deze methode is dat u de ruby-code die u in uw controller hebt ingesteld, kunt omspitten met uw JavaScript, waardoor het heel eenvoudig is om uw weergave te manipuleren met de resultaten van een aanvraag.

AJAX-callbacks met behulp van aangepaste JavaScript-gebeurtenissen

Elke Rails UJS-implementatie biedt ook een andere manier om callbacks toe te voegen aan onze AJAX-aanroepen - aangepaste JavaScript-gebeurtenissen. Laten we naar een ander voorbeeld kijken. In onze berichten-indexweergave (http: // localhost: 3000 / berichten /), kunnen we zien dat elk bericht kan worden verwijderd via een verwijderlink.

Laten we AJAXify onze link toevoegen door: remote => true toe te voegen en het een CSS klasse te geven, zodat we deze POST gemakkelijk kunnen vinden met behulp van een CSS-selector.

 <%= link_to 'Destroy', post, :confirm => 'Weet je het zeker?',: Methode =>: delete,: remote => true,: class => 'delete_post'%>

Die de volgende uitvoer produceert:

 Vernietigen

Elke UJS AJAX-oproep op rails biedt zes aangepaste gebeurtenissen waaraan u kunt koppelen:

• ajax: vóór - vlak voor ajax-oproep
• Ajax loading - voor ajax-aanroep, maar na XmlHttpRequest-object is gemaakt)
• ajax: succes - succesvolle ajax-oproep
• ajax: mislukking - mislukte ajax-oproep
• ajax: compleet - voltooiing van ajax-oproep (na ajax: succes en ajax: mislukking)
• ajax: na - nadat een Ajax-oproep is verzonden (let op: niet nadat deze is geretourneerd)

In ons geval voegen we een gebeurtenislistener toe aan de ajax: succes evenement op onze verwijderkoppelingen en het verwijderde bericht laten vervagen in plaats van de pagina opnieuw te laden. We zullen het volgende JavaScript toevoegen aan ons application.js-bestand.

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

We moeten ook onze posts_controller op de hoogte stellen om niet te proberen een weergave weer te geven nadat het bericht is verwijderd.

 def vernietig @post = Post.find (params [: id]) @ post.destroy response_to do | format | format.html redirect_to (posts_url) format.js render: nothing => true end

Wanneer we een bericht verwijderen, wordt deze geleidelijk vervaagd.

---

Conclusie

Nou, daar heb je het. Nu weet u hoe u AJAX-oproepen kunt maken met Rails 3 UJS. Hoewel de toegelichte voorbeelden eenvoudig waren, kunt u dezelfde technieken gebruiken om allerlei soorten interactiviteit aan uw project toe te voegen. Ik hoop dat je het ermee eens zult zijn dat het een grote verbetering is ten opzichte van vorige versies, en dat je het uitprobeert in je volgende Rails-project.

Welke technieken gebruikt u bij het implementeren van AJAX in Rails?