Comment utiliser la gemme cocon dans Rails 7 ?

La gem Cocoon est un outil puissant qui simplifie la gestion des formulaires imbriqués dans les applications Rails. Avec Cocon, vous pouvez facilement gérer les ajouts et suppressions dynamiques de champs de formulaire imbriqués, offrant ainsi une expérience utilisateur transparente. Dans cet article, nous explorerons comment utiliser le Joyau Cocoon dans une application Rails 7 à travers un exemple pratique.

Installation et configuration du Cocoon Gem

Pour commencer, installons et configurons la gemme Cocoon dans une application Rails 7.

Ajoutez la gemme Cocoon à votre Gemfile :

joyau 'cocon'

Exécutez la commande bundle pour installer la gem :

installation groupée

Exigez Cocoon dans votre fichier manifeste JavaScript (app/javascript/packs/application.js):

//= nécessite un cocon

Assurez-vous que jQuery est installé. Sinon, ajoutez-le à votre Gemfile :

gemme 'jquery-rails'

Configurez jQuery dans votre application en ajoutant la ligne suivante à votre fichier manifeste JavaScript :

//= nécessite jquery3

Implémentation de formulaires imbriqués avec Cocoon

Supposons que nous disposions d'une simple application Rails qui modélise un article de blog et ses commentaires associés. Nous utiliserons Cocoon pour gérer la création et la suppression des commentaires dans le formulaire d'article de blog.

Mettre en place les associations :

Application #/modèles/post.rb
classe Post <ApplicationRecord
has_many : commentaires
accepts_nested_attributes_for :comments,allow_destroy : true
fin

#app/models/comment.rb
Commentaire de classe <ApplicationRecord
appartient_à :post
fin

Créez le formulaire imbriqué dans la vue post-formulaire :

Application #/views/posts/_form.html.erb
<%= form_with(model: post) do |f| %>
<%= f.label :titre %>
<%= f.text_field :titre %>
<%= f.fields_for :comments do |comment_fields| %
<%= rendre 'comment_fields', f: comment_fields %>
<% fin %>

<%= link_to_add_association 'Ajouter un commentaire', f, :comments %>
<%= f.soumettre %>
<% fin %>

Créez un partiel pour les champs de commentaires :

Application #/views/posts/_comment_fields.html.erb
<div class="”nested-fields”">
<%= f.label :content %><%= f.text_field :content %>
<%= link_to_remove_association 'Supprimer le commentaire', f %>
</div>

Ajoutez le JavaScript nécessaire pour activer la fonctionnalité Cocoon :

// app/javascript/packs/application.js
$(document).on('turbolinks:load', function() {
$('.nested-fields').cocoon();
});

Travailler avec des formulaires imbriqués à l'aide de Cocoon

Maintenant que nous avons implémenté les configurations nécessaires, voyons Cocoon en action.

1. Lorsque vous chargez le formulaire de publication de blog, vous verrez le lien « Ajouter un commentaire ».
2. Cliquer sur « Ajouter un commentaire » ajoutera dynamiquement un nouvel ensemble de champs de commentaires au formulaire.
3. Pour supprimer un commentaire, cliquez sur le lien « Supprimer le commentaire » associé à ce commentaire.
4. Lorsque le formulaire est soumis, la publication et ses commentaires associés seront enregistrés dans la base de données.

Conclusion: 

La gemme Cocoon simplifie la gestion des formulaires imbriqués dans les applications Rails 7. En suivant les étapes décrites dans cet article, vous pouvez gérer de manière transparente les ajouts et suppressions dynamiques de champs de formulaire imbriqués, améliorant ainsi l'expérience utilisateur. Intégrez Cocoon à vos projets Rails pour gérer efficacement les formulaires complexes et améliorer la gestion des données. Expérimentez avec ses différentes options et fonctionnalités de personnalisation pour répondre à vos besoins spécifiques. Êtes-vous à la recherche d’un partenaire fiable pour répondre à vos besoins de développement Rails ? Cherchez pas plus loin. RailsCarma offre complète Services de développement de rails qui englobent tout, de la conception initiale au déploiement et à la maintenance.