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

To begin, let’s install and configure the Cocoon gem in a Rails 7 application.

Ajoutez la gemme Cocoon à votre Gemfile :

gem ‘cocoon’

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 :

gem ‘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

Let’s assume we have a simple Rails application that models a blog post and its associated comments. We will use Cocoon to manage the creation and removal of comments within the blog post form.

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| %
<%= render ‘comment_fields’, f: comment_fields %>
<% fin %>

<%= link_to_add_association ‘Add Comment’, 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 ‘Remove Comment’, 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

Now that we have implemented the necessary configurations, let’s see Cocoon in action.

1. When you load the blog post form, you will see the “Add Comment” link.
2. Clicking on “Add Comment” will dynamically add a new set of comment fields to the form.
3. To remove a comment, click on the “Remove Comment” link associated with that comment.
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.