Accentsconagua

Utiliser JavaScript et AJAX Unobtrusive avec Rails 3

Code
Share

Comme je l’ai mentionné dans mon précédent tutoriel Ruby on Rails, le JavaScript unobtrusif (UJS) est l’une des nouvelles fonctionnalités les plus intéressantes de Rails 3. UJS permet au code généré par Rails d’être beaucoup plus propre, de séparer votre logique JavaScript de vos dispositions HTML et de dissocier Rails de la bibliothèque JavaScript Prototype. Dans ce tutoriel, nous allons examiner ces fonctionnalités et apprendre à les utiliser dans une application simple Rails 3..

Contexte: Qu'est-ce que JavaScript discret??

Pour commencer, en quoi consiste exactement UJS? Tout simplement, UJS est un JavaScript séparé de votre balise HTML. La façon la plus simple de décrire UJS est d'utiliser un exemple. Prenez un gestionnaire d’événements onclick; nous pourrions l'ajouter de manière intrusive:

 Lien

Ou nous pourrions l'ajouter discrètement en attachant l'événement au lien (en utilisant jQuery dans cet exemple):

 Lien

Comme mentionné dans mon introduction, cette deuxième méthode présente de nombreux avantages, notamment un débogage plus simple et un code plus propre..

"Rails 3, en revanche, est agnostique pour les frameworks JavaScript. En d'autres termes, vous pouvez utiliser votre framework JavaScript de choix, à condition qu'une implémentation de Rails UJS existe pour ce framework."

Jusqu'à la version 3, Ruby on Rails générait du JavaScript intrusif. Le code résultant n'était pas propre, mais pire encore, il était étroitement associé au framework JavaScript Prototype. Cela signifiait qu'à moins de créer un plugin ou de pirater Rails, il fallait utiliser la bibliothèque Prototype avec les méthodes d'assistance JavaScript de Rail..

Rails 3, en revanche, est agnostique dans le framework JavaScript. En d'autres termes, vous pouvez utiliser le framework JavaScript de votre choix, à condition qu'une implémentation Rails UJS existe pour ce framework. Les implémentations UJS actuelles incluent les suivantes:

  • Prototype (par défaut)
  • jQuery
  • MooTools

Rails 3 implémente désormais toutes ses fonctionnalités de JavaScript Helper (soumissions AJAX, invites de confirmation, etc.) en ajoutant les attributs HTML 5 personnalisés suivants aux éléments HTML..

  • data-method - la méthode REST à utiliser dans les soumissions de formulaire.
  • data-confirm - le message de confirmation à utiliser avant d'effectuer une action.
  • data-remote - si vrai, soumettez via AJAX.
  • data-disable-with - désactive les éléments de formulaire lors de la soumission d'un formulaire

Par exemple, cette balise de lien

 Détruire

enverrait une demande de suppression AJAX après avoir demandé à l'utilisateur "Êtes-vous sûr?"

Vous pouvez imaginer à quel point il serait difficile de lire si tout ce JavaScript était intégré.

Maintenant que nous avons examiné UJS et la manière dont Rails l'implémente, configurons un projet et examinons certaines applications spécifiques. Nous allons utiliser la bibliothèque jQuery et l'implémentation UJS dans ce tutoriel.

Étape 1: Configuration du projet

Comme nous créons un nouveau projet à partir de rien, la première chose à faire est de créer le projet en tapant ce qui suit:

 rails nouveau blog --skip-prototype

Notez que je demande à Rails de sauter le fichier prototype JavaScript, car je vais utiliser la bibliothèque jQuery..

Commençons par le serveur pour nous assurer que tout semble fonctionner.

Et voila!

Maintenant que nous avons configuré notre projet, nous devons ajouter jQuery et le jQuery UJS à notre projet. Vous êtes libre d'organiser votre JavaScript comme bon vous semble, mais la convention Rails pour structurer vos fichiers JavaScript est la suivante (tous ces fichiers sont en public / javascripts):

  • fichier JavaScript d'infrastructure (jquery.js, prototype.js ou mootools.js)
  • rails.js - le code implémentant les rails UJS (quel que soit le framework choisi)
  • application.js - votre application JavaScript

Si vous ne l’avez pas déjà fait, téléchargez jquery.js (ou consultez un CDN) et rails.js et incluez-les dans votre public / javascripts annuaire.

La dernière chose à faire pour être opérationnel est de dire à Rails d'inclure ces fichiers js sur chacune de nos pages. Pour ce faire, ouvrez application.rb dans votre répertoire de configuration et ajoutez la ligne suivante

 config.action_view.JavaScript_expansions [: defaults] =% w (application jquery rails)

Cet élément de configuration indique à Rails d'inclure par défaut les trois fichiers JavaScript mentionnés ci-dessus..

Vous pouvez également extraire jQuery d’un CDN (http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js) en incluant manuellement une balise de script pointant vers le bon emplacement. Si vous faites cela, veillez à supprimer 'jquery' de l'élément de configuration JavaScript_expansions..

Étape 2: générer du code

Pour démontrer la fonctionnalité des rails UJS, nous allons d’abord avoir du code avec lequel travailler. Pour cette démo, nous allons simplement avoir un simple objet Post. Générons cela maintenant

 rails générer un échafaudage Nom du poste: titre de la chaîne: contenu de la chaîne: texte

Et puis migrons notre base de données pour créer la table des publications.

 rake db: migrer

Ok, nous sommes prêts à partir! Si nous naviguons vers http: // localhost: 3000 / posts / new, nous devrions voir un formulaire pour créer un nouveau poste.

Ok, tout fonctionne! Voyons maintenant comment utiliser les fonctionnalités UJS et AJAX intégrées à Rails..

Étape 3: Ajout d'AJAX

Maintenant que tous les fichiers JavaScript requis sont inclus, nous pouvons réellement commencer à utiliser Rails 3 pour implémenter certaines fonctionnalités AJAX. Bien que vous puissiez écrire tout le code JavaScript personnalisé que vous souhaitez, Rails fournit quelques méthodes intégrées pratiques que vous pouvez utiliser pour effectuer facilement des appels AJAX et d'autres actions JavaScript..

Regardons quelques helpers de rails couramment utilisés et le JavaScript qu'ils génèrent

Soumission de formulaire AJAX et fichiers ERB Javascript

Si nous examinons notre formulaire de publication, nous constatons que chaque fois que nous créons ou modifions une publication, le formulaire est soumis manuellement, puis nous sommes redirigés vers une vue en lecture seule de cette publication. Et si nous voulions soumettre ce formulaire via AJAX au lieu d'utiliser une soumission manuelle?

Rails 3 facilite la conversion de tout formulaire en AJAX. Tout d’abord, ouvrez votre _form.html.erb partiel dans app / views / posts et modifiez la première ligne de:

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

à

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

Avant Rails 3, ajouter : remote => true aurait généré un tas de JavaScript en ligne à l'intérieur de la balise de formulaire, mais avec Rails 3 UJS, le seul changement est l'ajout d'un attribut personnalisé HTML 5. Peux tu le repérer?

L'attribut est data-remote = "true", et le code JavaScript UJS de Rails se lie à tous les formulaires ayant cet attribut et les soumet via AJAX au lieu d'un POST traditionnel..

C'est tout ce dont vous avez besoin pour soumettre AJAX, mais comment effectuer un rappel après le retour de l'appel AJAX?

Le moyen le plus courant de gérer le retour d'un appel AJAX consiste à utiliser des fichiers ERB JavaScript. Ceux-ci fonctionnent exactement comme vos fichiers ERB normaux, mais contiennent du code JavaScript au lieu de HTML. Essayons-le.

La première chose à faire est de dire à notre contrôleur comment répondre aux demandes AJAX. Dans posts_controller.rb (app / contrôleurs), nous pouvons dire à notre contrôleur de répondre à une demande AJAX en ajoutant 

 format.js

dans chaque respond_to block que nous allons appeler via AJAX. Par exemple, nous pourrions mettre à jour l'action create pour qu'elle ressemble à ceci: 

 def create @post = Post.new (params [: post]) respond_to do | format | if @ post.save format.html redirect_to (@post,: notice => 'Message créé.') format.js sinon format.html render: action => "nouveau" format.js fin fin fin

Comme nous n’avons spécifié aucune option dans le bloc respond_to, Rails répondra aux requêtes JavaScript en chargeant un .js ERB avec le même nom que l'action du contrôleur (create.js.erb, dans ce cas).

Maintenant que notre contrôleur sait comment gérer les appels AJAX, nous devons créer nos vues. Pour l'exemple en cours, ajoutez create.js.erb dans ton app / vues / posts annuaire. Ce fichier sera rendu et le code JavaScript à l'intérieur sera exécuté à la fin de l'appel. Pour l'instant, nous allons simplement écraser la balise de formulaire avec le titre et le contenu de l'article du blog:

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

Maintenant, si nous créons un nouveau poste, nous obtenons ce qui suit à l'écran. Succès!

L'avantage de cette méthode est que vous pouvez intercaler le code ruby ​​que vous avez configuré dans votre contrôleur avec votre JavaScript, ce qui vous permet de manipuler votre affichage avec le résultat d'une requête..

Rappels AJAX à l'aide d'événements JavaScript personnalisés

Chaque implémentation Rails UJS fournit également un autre moyen d’ajouter des rappels à nos appels AJAX - des événements JavaScript personnalisés. Regardons un autre exemple. Sur la vue index de nos publications (http: // localhost: 3000 / posts /), nous pouvons voir que chaque article peut être supprimé via un lien de suppression.

AJAXify notre lien en ajoutant: remote => true et en lui donnant une classe CSS afin que nous puissions facilement trouver ce POST en utilisant un sélecteur CSS.

 <%= link_to 'Destroy', post, :confirm => 'Êtes-vous sûr?',: Méthode =>: supprimer,: distant => vrai,: classe => 'supprimer_post'%>

Ce qui produit la sortie suivante:

 Détruire

Chaque appel UJS AJAX sur rails fournit six événements personnalisés pouvant être associés à:

  • ajax: avant - juste avant l'appel ajax
  • ajax: chargement - avant l'appel ajax, mais après la création de l'objet XmlHttpRequest)
  • ajax: succès - appel ajax réussi
  • ajax: échec - appel ajax échoué
  • ajax: complet - achèvement de l'appel ajax (après ajax: succès et ajax: échec)
  • ajax: après - après que l'appel ajax soit envoyé (note: pas après son retour)

Dans notre cas, nous ajouterons un écouteur d'événement à la ajax: succès événement sur nos liens de suppression, et rendre le post supprimé supprimé fondu au lieu de recharger la page. Nous allons ajouter le code JavaScript suivant à notre fichier application.js.

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

Nous devrons également dire à notre posts_controller de ne pas essayer de rendre une vue après la suppression de la publication..

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

Maintenant, lorsque nous supprimons un message, il disparaît progressivement.

Conclusion

Bien, tu l'as maintenant. Vous savez maintenant comment passer des appels AJAX avec Rails 3 UJS. Bien que les exemples expliqués soient simples, vous pouvez utiliser ces mêmes techniques pour ajouter toutes sortes d'interactivité à votre projet. J'espère que vous conviendrez que c'est une grosse amélioration par rapport aux versions précédentes, et que vous pourrez l'essayer lors de votre prochain projet Rails..

Quelles techniques utilisez-vous pour implémenter AJAX dans Rails??

Code
×