{"id":37354,"date":"2023-07-12T06:16:59","date_gmt":"2023-07-12T06:16:59","guid":{"rendered":"https:\/\/www.railscarma.com\/?p=37354"},"modified":"2023-07-20T04:44:16","modified_gmt":"2023-07-20T04:44:16","slug":"comment-utiliser-cocoon-gem-dans-rails-7","status":"publish","type":"post","link":"https:\/\/www.railscarma.com\/fr\/blog\/comment-utiliser-cocoon-gem-dans-rails-7\/","title":{"rendered":"Comment utiliser la gemme cocon dans Rails 7 ?"},"content":{"rendered":"
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

La gem Cocoon est un outil puissant qui simplifie la gestion des formulaires imbriqu\u00e9s dans les applications Rails. Avec Cocon<\/a>, vous pouvez facilement g\u00e9rer les ajouts et suppressions dynamiques de champs de formulaire imbriqu\u00e9s, offrant ainsi une exp\u00e9rience utilisateur transparente. Dans cet article, nous explorerons comment utiliser le Joyau Cocoon dans une application Rails 7<\/strong> \u00e0 travers un exemple pratique.<\/span><\/p>

Installation et configuration du Cocoon Gem<\/b><\/h3>

Pour commencer, installons et configurons la gemme Cocoon dans une application Rails 7.<\/span><\/p>

Ajoutez la gemme Cocoon \u00e0 votre Gemfile\u00a0:<\/span><\/p>

joyau 'cocon'<\/strong><\/p>

Ex\u00e9cutez la commande bundle pour installer la gem\u00a0:<\/span><\/p>

installation group\u00e9e<\/strong><\/p>

Exigez Cocoon dans votre fichier manifeste JavaScript (<\/span>app\/javascript\/packs\/application.js<\/span>):<\/span><\/p>

\/\/= n\u00e9cessite un cocon<\/strong><\/p>

Assurez-vous que jQuery est install\u00e9. Sinon, ajoutez-le \u00e0 votre Gemfile\u00a0:<\/span><\/p>

gemme 'jquery-rails'<\/strong><\/p>

Configurez jQuery dans votre application en ajoutant la ligne suivante \u00e0 votre fichier manifeste JavaScript\u00a0:<\/span><\/p>

\/\/= n\u00e9cessite jquery3<\/strong><\/p>

\u00a0<\/p>

Impl\u00e9mentation de formulaires imbriqu\u00e9s avec Cocoon<\/b><\/h3>

Supposons que nous disposions d'une simple application Rails qui mod\u00e9lise un article de blog et ses commentaires associ\u00e9s. Nous utiliserons Cocoon pour g\u00e9rer la cr\u00e9ation et la suppression des commentaires dans le formulaire d'article de blog.<\/span><\/p>

Mettre en place les associations :<\/span><\/p>

Application #\/mod\u00e8les\/post.rb<\/strong>
classe Post <ApplicationRecord
has_many\u00a0:\u00a0commentaires
accepts_nested_attributes_for :comments,allow_destroy\u00a0: true
fin<\/strong><\/p>

#app\/models\/comment.rb
<\/strong>Commentaire de classe <ApplicationRecord
<\/strong>appartient_\u00e0 :post
<\/strong>fin<\/strong><\/p>

Cr\u00e9ez le formulaire imbriqu\u00e9 dans la vue post-formulaire\u00a0:<\/span><\/p>

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

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

Cr\u00e9ez un partiel pour les champs de commentaires\u00a0:<\/span><\/p>

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

Ajoutez le JavaScript n\u00e9cessaire pour activer la fonctionnalit\u00e9 Cocoon\u00a0:<\/span><\/p>

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

<\/strong><\/p>

Travailler avec des formulaires imbriqu\u00e9s \u00e0 l'aide de Cocoon<\/b><\/h3>

Maintenant que nous avons impl\u00e9ment\u00e9 les configurations n\u00e9cessaires, voyons Cocoon en action.<\/span><\/p>

  1. Lorsque vous chargez le formulaire de publication de blog, vous verrez le lien \u00ab Ajouter un commentaire \u00bb.<\/span><\/li>
  2. Cliquer sur \u00ab Ajouter un commentaire \u00bb ajoutera dynamiquement un nouvel ensemble de champs de commentaires au formulaire.<\/span><\/li>
  3. Pour supprimer un commentaire, cliquez sur le lien \u00ab Supprimer le commentaire \u00bb associ\u00e9 \u00e0 ce commentaire.<\/span><\/li>
  4. Lorsque le formulaire est soumis, la publication et ses commentaires associ\u00e9s seront enregistr\u00e9s dans la base de donn\u00e9es.<\/span><\/li><\/ol>

    Conclusion:\u00a0<\/b><\/h3>

    La gemme Cocoon simplifie la gestion des formulaires imbriqu\u00e9s dans les applications Rails 7. En suivant les \u00e9tapes d\u00e9crites dans cet article, vous pouvez g\u00e9rer de mani\u00e8re transparente les ajouts et suppressions dynamiques de champs de formulaire imbriqu\u00e9s, am\u00e9liorant ainsi l'exp\u00e9rience utilisateur. Int\u00e9grez Cocoon \u00e0 vos projets Rails pour g\u00e9rer efficacement les formulaires complexes et am\u00e9liorer la gestion des donn\u00e9es. Exp\u00e9rimentez avec ses diff\u00e9rentes options et fonctionnalit\u00e9s de personnalisation pour r\u00e9pondre \u00e0 vos besoins sp\u00e9cifiques. \u00cates-vous \u00e0 la recherche d\u2019un partenaire fiable pour r\u00e9pondre \u00e0 vos besoins de d\u00e9veloppement Rails\u00a0? Cherchez pas plus loin. RailsCarma<\/a> offre compl\u00e8te Services de d\u00e9veloppement de rails<\/a> qui englobent tout, de la conception initiale au d\u00e9ploiement et \u00e0 la maintenance.\u00a0<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t

    \r\n
    Articles Similaires<\/div>\r\n
    \r\n\r\n
    \r\n
    \r\n \r\n\r\n \"Ruby\r\n\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n Ruby on Rails pour MLOps : un guide complet pour le d\u00e9ploiement de ML <\/a>\r\n\r\n <\/div>\r\n
    \r\n
    \r\n \r\n\r\n \"Applications\r\n\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n Construire des applications d'IA agentique avec Ruby on Rails <\/a>\r\n\r\n <\/div>\r\n
    \r\n
    \r\n \r\n\r\n \"Offliberty\r\n\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n Qu'est-ce que Offliberty Ruby Gem et comment fonctionne-t-il ? <\/a>\r\n\r\n <\/div>\r\n
    \r\n
    \r\n \r\n\r\n \"Construire\r\n\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n Comment construire une plateforme SaaS \u00e9volutive en utilisant Ruby on Rails <\/a>\r\n\r\n <\/div>\r\n \r\n <\/div>\r\n\r\n