Asa cum am mentionat in tutorialul meu Ruby on Rails anterior, JavaScript Unobtrusive (UJS) este una dintre cele mai noi caracteristici noi in Rails 3. UJS permite ca Rails sa genereze un cod mult mai curat, ajuta la separarea logicii JavaScript de layout-urile HTML si uncouples Rails din biblioteca JavaScript Prototype. În acest tutorial, vom examina aceste caracteristici și vom învăța cum să le folosim într-o aplicație simplă Rails 3.

---

Context: Ce este un JavaScript discret?

Pentru a începe, ce anume este UJS? Pur și simplu, UJS este JavaScript care este separat de marcajele HTML. Cel mai simplu mod de a descrie UJS este cu un exemplu. Luați un handler de evenimente onclick; l-am putea adăuga obtrusiv:

 Legătură

Sau l-am putea adăuga discret prin atașarea evenimentului la link (folosind jQuery în acest exemplu):

 Legătură 

După cum am menționat în introducerea mea, această a doua metodă are o varietate de beneficii, inclusiv o depanare mai ușoară și un cod mai curat.

"Rails 3, pe de altă parte, este agnostic în cadrul JavaScript-ului. Cu alte cuvinte, puteți utiliza cadrul JavaScript de alegere, cu condiția să existe o implementare a sistemului Rails UJS pentru acest cadru".

Până la versiunea 3, Ruby on Rails a generat JavaScript obtrusiv. Codul rezultat nu a fost curat, dar chiar și mai rău, a fost cuplat strâns la cadrul JavaScript Prototype. Acest lucru însemna că, dacă nu ați creat un plugin sau hacked Rails, a trebuit să utilizați biblioteca Prototype cu ajutorul metodelor helper JavaScript ale lui Rail.

Rails 3, pe de altă parte, este agnostic în cadrul JavaScript. Cu alte cuvinte, puteți utiliza cadrul JavaScript de alegere, cu condiția să existe o implementare Rails UJS pentru acest cadru. Implementările actuale ale UJS includ următoarele:

• Prototip (implicit)
• jQuery
• MooTools

Rails 3 implementează acum toate funcționalitățile JavaScript Helper (AJAX supune, solicitările de confirmare, etc) în mod discret prin adăugarea următoarelor atribute personalizate HTML 5 la elementele HTML.

• metoda de date - metoda REST utilizată în transmiterea formularului.
• confirmarea datelor - mesajul de confirmare utilizat înainte de efectuarea unei acțiuni.
• date-remote - dacă este adevărat, trimiteți prin intermediul AJAX.
• data-disable-with - dezactivează elementele formularului în timpul depunerii unui formular

De exemplu, această etichetă de legătură

 Distruge

ar trimite o cerere de ștergere AJAX după ce a cerut utilizatorului "Ești sigur?".

Vă puteți imagina cât de greu de citit ar fi dacă tot JavaScript-ul a fost în linie.

Acum că am analizat UJS și cum implementează Rails UJS, să organizăm un proiect și să analizăm unele aplicații specifice. Vom folosi biblioteca jQuery și implementarea UJS în acest tutorial.

---

Pasul 1: Configurarea proiectului

Deoarece noi creăm un nou proiect de la zero, primul lucru pe care trebuie să-l facem este să creați proiectul introducând următoarele:

 rails new blog - skip-prototip

Observați că instruiesc Rails să sări peste fișierul JavaScript prototip, deoarece voi folosi biblioteca jQuery.

Să începem serverul doar pentru a ne asigura că totul pare să funcționeze.

Și, voila!

Acum, când am creat proiectul nostru, trebuie să adăugăm jQuery și jJuery UJS la proiectul nostru. Sunteți liber să vă organizați JavaScript, totuși doriți, dar convenția Rails pentru structurarea fișierelor JavaScript este după cum urmează (toate aceste fișiere merg în public / javascripts):

• cadru JavaScript (jquery.js, prototype.js sau mootools.js)
• rails.js - codul de implementare a șinelor UJS (pentru orice cadru ați ales)
• application.js - aplicația dvs. JavaScript

Dacă nu ați făcut deja acest lucru, descărcați jquery.js (sau consultați un CDN) și rails.js și includeți-i în publice / javascripts director.

Ultimul lucru pe care trebuie să-l facem pentru a începe să funcționeze este să-i spuneți lui Rails să includă aceste fișiere JS pe fiecare dintre paginile noastre. Pentru aceasta, deschideți application.rb în directorul config și adăugați următoarea linie

 config.action_view.JavaScript_expansions [: defaults] =% w (aplicație jquery șine)

Acest element de configurare îi spune lui Rails să includă în mod implicit cele trei fișiere JavaScript menționate mai sus.

Alternativ, ați putea să luați jQuery de pe un CDN (adică http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js) prin includerea manuală a unei etichete de script care să indice locația corectă. Dacă faceți acest lucru, asigurați-vă că ați șters "jquery" din elementul de configurare JavaScript_expansions.

---

Pasul 2: Generarea unui anumit cod

Pentru a demonstra funcționalitatea UJS a șinelor, va trebui să avem mai întâi un cod cu care să lucrăm. Pentru acest demo vom avea doar un obiect Post simplu. Să generăm asta acum

 șinele generează schele Numele postului: titlul șirului: șir de conținut: text

Apoi hai să migrăm baza de date pentru a crea tabela de postări.

 rake db: migrați

Ok, suntem bine să plecăm! Dacă navigăm la http: // localhost: 3000 / posturi / noi, ar trebui să vedem un formular pentru a crea o postare nouă.

Ok, totul funcționează! Acum să săpăm și să vedem cum să folosim funcțiile UJS și AJAX coapte în Rails.

---

Pasul 3: Adăugarea AJAX

Acum, că toate fișierele JavaScript necesare sunt incluse, putem începe de fapt să folosim Rails 3 pentru a implementa unele funcționalități AJAX. Deși puteți scrie toate JavaScript personalizat pe care doriți, Rails oferă câteva metode frumoase built-in pe care le puteți utiliza pentru a efectua cu ușurință apeluri AJAX și alte acțiuni JavaScript.

Să ne uităm la câțiva utilizatori de șine folosiți în mod obișnuit și la JavaScript pe care îl generează

AJAX Form Submission și Javascript ERB Fișiere

Dacă ne uităm la formularul nostru de postări, putem vedea că de fiecare dată când creați sau editați o postare, formularul este trimis manual și apoi suntem redirecționați către o vizualizare numai pentru acea postare. Dacă am vrea să trimitem formularul prin AJAX în loc să folosim o trimitere manuală?

Rails 3 ușurează transformarea oricărei forme în AJAX. În primul rând, deschideți-vă _form.html.erb parțială în aplicații / vizualizări / postări și modificați prima linie din:

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

la

 <%= form_for(@post, :remote => adevărat) nu | f | %>

Înainte de Rails 3, adăugând : remote => true ar fi generat o grămadă de JavaScript inline în eticheta formularului, dar cu Rails 3 UJS, singura modificare este adăugarea unui atribut HTML 5 personalizat. Poți să-l vezi?

Atributul este de date la distanță = „true“, și Rails UJS JavaScript se leagă de orice formă cu acel atribut și le transmite prin AJAX în loc de un POST tradițional.

Asta e tot ce este necesar pentru a face AJAX trimite, dar cum vom efectua un apel invers după returnarea apelului AJAX?

Cea mai obișnuită metodă de a gestiona o întoarcere de la un apel AJAX este prin utilizarea fișierelor JavaScript ERB. Acestea funcționează exact ca fișierele dvs. normale ERB, dar conțin cod JavaScript în loc de HTML. Să încercăm.

Primul lucru pe care trebuie să-l facem este să-i spuneți controlorului nostru cum să răspundă solicitărilor AJAX. În posts_controller.rb (aplicații / controlori) putem spune operatorului nostru să răspundă la o solicitare AJAX adăugând

 format.js

în fiecare answer_to bloc pe care o vom apela prin AJAX. De exemplu, am putea actualiza acțiunea de creare pentru a arăta astfel:

 def create @post = Post.new (params [: post]) răspundeți_ pentru a face | format dacă @ post.save format.html redirect_to (@post,: notice => 'Post creat.') format.js alt format.html render: action => "new" format.js end end end

Deoarece nu am specificat nicio opțiune în blocul answer_to, Rails va răspunde la solicitările JavaScript încărcând a .js ERB cu același nume ca și acțiunea controlerului (create.js.erb, în ​​acest caz).

Acum că controlorul nostru știe cum să se ocupe de apelurile AJAX, trebuie să ne creăm vederile. Pentru exemplul curent, adăugați create.js.erb în tine app / views / posturi director. Acest fișier va fi redat și JavaScript în interior va fi executat atunci când apelul termină. Pentru moment, pur și simplu vom înlocui eticheta formularului cu titlul și conținutul postării pe blog:

 $ ( 'Organism'). Html (“
<%= escape_javaScript(@post.title) %>
").adăuga("<%= escape_javaScript(@post.content) %>„);

Acum, dacă vom crea o nouă postare, vom primi următoarele informații pe ecran. Succes!

Avantajul acestei metode este că aveți posibilitatea să inserați codul ruby ​​pe care îl configurați în controlerul dvs. cu ajutorul JavaScript-ului dvs., ceea ce face foarte ușor să manipulați vizualizarea dvs. cu rezultatele unei solicitări.

AJAX callbacks folosind evenimente personalizate JavaScript

Fiecare implementare Rails UJS oferă și un alt mod de a adăuga callback-uri la apelurile noastre AJAX - evenimente personalizate JavaScript. Să ne uităm la un alt exemplu. În afișarea indexului de posturi (http: // localhost: 3000 / posturi /), vedem că fiecare post poate fi șters printr-un link de ștergere.

Să AJAXify link-ul nostru prin adăugarea: remote => true și suplimentar oferindu-i o clasă CSS astfel încât să putem găsi cu ușurință acest POST folosind un selector CSS.

 <%= link_to 'Destroy', post, :confirm => "Ești sigur?",: Method =>: delete,: remote => true,: class => 'delete_post'%>

Care produce următoarea ieșire:

 Distruge

Fiecare apel UJS AJAX pentru șine oferă șase evenimente personalizate care pot fi atașate la:

• ajax: înainte - chiar înainte de apelul ajax
• ajax: încărcare - înainte de apelul ajax, dar după crearea obiectului XmlHttpRequest)
• ajax: succes - succes apel ajax
• ajax: eșec - eșuat apel ajax
• ajax: complet - finalizarea apelului ajax (după ajax: succes și ajax: eșec)
• ajax: după - după ce apelul ajax este trimis (notă: nu după ce se întoarce)

În cazul nostru, vom adăuga un ascultător al evenimentului ajax: succes eveniment de pe link-urile noastre de ștergere, și de a face postul șters stingere, mai degrabă decât reîncărcarea paginii. Vom adăuga următorul cod JavaScript în fișierul nostru application.js.

 $ ('. delete_post') bind ('ajax: succes', functie () $ (this) .closest ('tr');

Va trebui, de asemenea, să ne spunem că posts_controllerul nostru nu încearcă să facă o vizualizare după ce termină ștergerea postării.

 def distruge @post = Post.find (params [: id]) @ post.destroy răspuns_to | format | format.html redirect_to (posts_url) format.js render: nimic => true sfârșit

Acum, când ștergem o postare, se va dispărea treptat.

---

Concluzie

Ei bine, acolo aveți. Acum știi cum să faci apeluri AJAX folosind Rails 3 UJS. În timp ce exemplele explicate au fost simple, puteți utiliza aceleași tehnici pentru a adăuga tot felul de interactivitate proiectului dumneavoastră. Sper că veți fi de acord că este o îmbunătățire majoră față de versiunile anterioare și că o veți încerca în următorul proiect Rails.

Ce tehnici folosiți la implementarea AJAX în Rails?