Share
Come ho accennato nel mio precedente tutorial su Ruby on Rails, UnoJavascript JavaScript (UJS) è una delle nuove funzionalità più interessanti di Rails 3. UJS consente al codice generato da Rails di essere molto più pulito, aiuta a separare la logica JavaScript dai tuoi layout HTML e disaccoppia Rotaie dalla libreria Prototype JavaScript. In questo tutorial, esamineremo queste funzionalità e impareremo come utilizzarle in una semplice applicazione Rails 3.
Per iniziare, cos'è esattamente UJS? Semplicemente, UJS è JavaScript che è separato dal tuo markup HTML. Il modo più semplice per descrivere UJS è con un esempio. Prendere un gestore di eventi onclick; potremmo aggiungerlo in modo obliquo:
collegamento
O potremmo aggiungerlo in modo discreto collegando l'evento al link (usando jQuery in questo esempio):
collegamento
Come accennato nella mia introduzione, questo secondo metodo ha una serie di vantaggi, tra cui un debugging più semplice e un codice più pulito.
"Rails 3, d'altro canto, è indipendente dal framework JavaScript, in altre parole, è possibile utilizzare il framework JavaScript prescelto, a condizione che esista un'implementazione UJS Rails per quel framework."
Fino alla versione 3, Ruby on Rails ha generato JavaScript invadente. Il codice risultante non era pulito, ma ancora peggio, era strettamente accoppiato al framework Prototype JavaScript. Questo significava che a meno che non avessi creato un plugin o Rails hackerati, dovevi usare la libreria Prototype con i metodi helper JavaScript di Rail.
Rails 3, d'altra parte, è agnostico framework JavaScript. In altre parole, è possibile utilizzare il framework JavaScript prescelto, a condizione che esista un'implementazione UCHI Rails per quel framework. Le implementazioni UJS correnti includono quanto segue:
Rails 3 implementa ora in modo discreto tutte le funzionalità di JavaScript Helper (richieste AJAX, prompt di conferma, ecc.) Aggiungendo i seguenti attributi personalizzati HTML 5 agli elementi HTML.
Ad esempio, questo tag link
Distruggere
invierebbe una richiesta di cancellazione AJAX dopo aver chiesto all'utente "Sei sicuro?"
Puoi immaginare quanto sarebbe più difficile leggere se tutto ciò che JavaScript fosse in linea.
Ora che abbiamo esaminato UJS e come Rails implementa UJS, impostiamo un progetto e guardiamo alcune applicazioni specifiche. In questa esercitazione utilizzeremo la libreria jQuery e l'implementazione UJS.
Dal momento che stiamo creando un nuovo progetto da zero, la prima cosa che dobbiamo fare è creare il progetto digitando quanto segue:
rota nuovo blog --skip-prototype
Si noti che sto istruendo Rails per saltare il file JavaScript prototipo, dal momento che sto per utilizzare la libreria jQuery.
Iniziamo il server solo per assicurarci che tutto funzioni correttamente.
E, voilà!
Ora che abbiamo impostato il nostro progetto, dobbiamo aggiungere jQuery e jQuery UJS al nostro progetto. Sei libero di organizzare il tuo JavaScript come vuoi, ma la convenzione di Rails per strutturare i tuoi file JavaScript è la seguente (tutti questi file sono pubblici / javascript):
Se non lo hai già fatto, scarica jquery.js (o fai riferimento a un CDN) e rails.js e includili nel tuo pubblici / javascript elenco.
L'ultima cosa che dobbiamo fare per essere operativi è in realtà dire a Rails di includere questi file js su ciascuna delle nostre pagine. Per fare ciò, apri application.rb nella tua directory di configurazione e aggiungi la seguente riga
config.action_view.JavaScript_expansions [: defaults] =% w (applicazione jquery rails)
Questo elemento di configurazione dice a Rails di includere i tre file JavaScript sopra menzionati per impostazione predefinita.
In alternativa, puoi afferrare jQuery da un CDN (ad esempio http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js) includendo manualmente un tag script che punta alla posizione corretta. Se lo fai, assicurati di rimuovere "jquery" dall'elemento di configurazione JavaScript_expansions.
Per dimostrare la funzionalità UJS dei binari, per prima cosa dovremo avere del codice con cui lavorare. Per questa demo avremo solo un semplice oggetto Post. Facciamolo ora
rails genera scaffold Nome del messaggio: titolo stringa: contenuto stringa: testo
E poi migriamo il nostro database per creare la tabella dei post.
rake db: migrate
Ok, siamo a posto! Se navighiamo http: // localhost: 3000 / messaggi / new, dovremmo vedere un modulo per creare un nuovo post.
Ok, funziona tutto! Ora analizziamo e vediamo come utilizzare la funzionalità UJS e AJAX in Rails.
Ora che tutti i file JavaScript necessari sono stati inclusi, possiamo effettivamente iniziare a utilizzare Rails 3 per implementare alcune funzionalità AJAX. Sebbene tu possa scrivere tutto il codice JavaScript personalizzato che desideri, Rails offre alcuni buoni metodi integrati che puoi usare per eseguire facilmente chiamate AJAX e altre azioni JavaScript.
Diamo un'occhiata a un paio di aiutanti di rotaie comunemente usati e al codice JavaScript che generano
Se esaminiamo il nostro modulo Post, possiamo vedere che ogni volta che creiamo o modificiamo un post, il modulo viene inviato manualmente e quindi siamo reindirizzati a una visualizzazione di sola lettura di quel post. Cosa accadrebbe se volessimo inviare tale modulo tramite AJAX anziché utilizzare l'invio manuale?
Rails 3 semplifica la conversione di qualsiasi forma in AJAX. Primo, apri il tuo _form.html.erb parziale in app / views / posts e modifica la prima riga da:
<%= form_for(@post) do |f| %>
a
<%= form_for(@post, :remote => vero) do | f | %>
Prima di Rails 3, aggiungendo : remote => true avrebbe generato una serie di JavaScript inline all'interno del tag form, ma con Rails 3 UJS, l'unica modifica è l'aggiunta di un attributo personalizzato HTML 5. Puoi individuarlo?
Accentsconagua