{"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":"wie-man-cocoon-gem-in-rails-verwendet-7","status":"publish","type":"post","link":"https:\/\/www.railscarma.com\/de\/blog\/wie-man-cocoon-gem-in-rails-verwendet-7\/","title":{"rendered":"Wie verwende ich Cocoon Gem in 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

Das Cocoon-Gem ist ein leistungsstarkes Tool, das die Verwaltung verschachtelter Formulare in Rails-Anwendungen vereinfacht. Mit Kokon<\/a>k\u00f6nnen Sie verschachtelte Formularfelder einfach dynamisch hinzuf\u00fcgen und entfernen und sorgen so f\u00fcr ein nahtloses Benutzererlebnis. In diesem Artikel werden wir untersuchen, wie man das nutzt Cocoon-Juwel in einer Rails 7-Anwendung<\/strong> anhand eines praktischen Beispiels.<\/span><\/p>

Installieren und Einrichten des Cocoon Gem<\/b><\/h3>

Lassen Sie uns zun\u00e4chst das Cocoon-Gem in einer Rails 7-Anwendung installieren und konfigurieren.<\/span><\/p>

F\u00fcgen Sie den Cocoon-Edelstein zu Ihrer Gemfile hinzu:<\/span><\/p>

Edelstein \u201eKokon\u201c<\/strong><\/p>

F\u00fchren Sie den Bundle-Befehl aus, um das Gem zu installieren:<\/span><\/p>

Bundle-Installation<\/strong><\/p>

Erfordern Sie Cocoon in Ihrer JavaScript-Manifestdatei (<\/span>app\/javascript\/packs\/application.js<\/span>):<\/span><\/p>

\/\/= Kokon erforderlich<\/strong><\/p>

Stellen Sie sicher, dass Sie jQuery installiert haben. Wenn nicht, f\u00fcgen Sie es Ihrer Gemfile hinzu:<\/span><\/p>

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

Konfigurieren Sie jQuery in Ihrer Anwendung, indem Sie die folgende Zeile zu Ihrer JavaScript-Manifestdatei hinzuf\u00fcgen:<\/span><\/p>

\/\/= erfordert jquery3<\/strong><\/p>

\u00a0<\/p>

Implementierung verschachtelter Formulare mit Cocoon<\/b><\/h3>

Nehmen wir an, wir haben eine einfache Rails-Anwendung, die einen Blog-Beitrag und die zugeh\u00f6rigen Kommentare modelliert. Wir werden Cocoon verwenden, um die Erstellung und Entfernung von Kommentaren im Blog-Beitragsformular zu verwalten.<\/span><\/p>

Richten Sie die Zuordnungen ein:<\/span><\/p>

# app\/models\/post.rb<\/strong>
Klasse Post < ApplicationRecord
has_many :Kommentare
akzeptiert_nested_attributes_for :comments,allow_destroy: true
Ende<\/strong><\/p>

#app\/models\/comment.rb
<\/strong>Klassenkommentar < ApplicationRecord
<\/strong>geh\u00f6rt_zu :post
<\/strong>Ende<\/strong><\/p>

Erstellen Sie das verschachtelte Formular in der Post-Formular-Ansicht:<\/span><\/p>

# app\/views\/posts\/_form.html.erb
<\/strong><%= form_with(model: post) do |f| %>
<\/strong><%= f.label :title %>
<\/strong><%= f.text_field :title %>
<\/strong><%= f.fields_for :comments do |comment_fields| %
<\/strong><%= render 'comment_fields', f: comment_fields %>
<\/strong><% Ende %><\/strong><\/p>

<%= link_to_add_association 'Kommentar hinzuf\u00fcgen', f, :comments %>
<\/strong><%= f.submit %>
<\/strong><% Ende %><\/strong><\/p>

Erstellen Sie einen Teil f\u00fcr die Kommentarfelder:<\/span><\/p>

# app\/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 'Kommentar entfernen', f %>
<\/strong><\/div><\/strong><\/p>

F\u00fcgen Sie das erforderliche JavaScript hinzu, um die Cocoon-Funktionalit\u00e4t zu aktivieren:<\/span><\/p>

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

<\/strong><\/p>

Arbeiten mit verschachtelten Formularen mit Cocoon<\/b><\/h3>

Nachdem wir nun die notwendigen Konfigurationen implementiert haben, sehen wir uns Cocoon in Aktion an.<\/span><\/p>

  1. Wenn Sie das Blog-Beitragsformular laden, wird der Link \u201eKommentar hinzuf\u00fcgen\u201c angezeigt.<\/span><\/li>
  2. Wenn Sie auf \u201eKommentar hinzuf\u00fcgen\u201c klicken, werden dem Formular dynamisch neue Kommentarfelder hinzugef\u00fcgt.<\/span><\/li>
  3. Um einen Kommentar zu entfernen, klicken Sie auf den Link \u201eKommentar entfernen\u201c, der diesem Kommentar zugeordnet ist.<\/span><\/li>
  4. Beim Absenden des Formulars werden der Beitrag und die zugeh\u00f6rigen Kommentare in der Datenbank gespeichert.<\/span><\/li><\/ol>

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

    Das Cocoon-Gem vereinfacht die Handhabung verschachtelter Formulare in Rails 7-Anwendungen. Wenn Sie die in diesem Artikel beschriebenen Schritte befolgen, k\u00f6nnen Sie dynamische Hinzuf\u00fcgungen und Entfernungen verschachtelter Formularfelder nahtlos verwalten und so die Benutzererfahrung verbessern. Integrieren Sie Cocoon in Ihre Rails-Projekte, um komplexe Formulare effizient zu verarbeiten und das Datenmanagement zu verbessern. Experimentieren Sie mit den verschiedenen Optionen und Anpassungsfunktionen, um sie an Ihre spezifischen Anforderungen anzupassen. Suchen Sie einen zuverl\u00e4ssigen Partner f\u00fcr Ihre Rails-Entwicklungsanforderungen? Suchen Sie nicht weiter. SchienenCarma<\/a> Angebote umfassend Rails-Entwicklungsdienstleistungen<\/a> die alles vom ersten Entwurf bis zur Bereitstellung und Wartung umfassen.\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
    zusammenh\u00e4ngende Posts<\/div>\r\n
    \r\n\r\n
    \r\n
    \r\n \r\n\r\n \"Agentic\r\n\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n Building Agentic AI Applications with 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 Was ist Offliberty Ruby Gem und wie funktioniert es? <\/a>\r\n\r\n <\/div>\r\n
    \r\n
    \r\n \r\n\r\n \"Rails\r\n\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n Rails link_to Methode: Die vollst\u00e4ndige Anleitung mit Beispielen <\/a>\r\n\r\n <\/div>\r\n
    \r\n
    \r\n \r\n\r\n \"API-Integrationsl\u00f6sungen\r\n\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n API-Integrationsl\u00f6sungen von Drittanbietern in Ruby on Rails <\/a>\r\n\r\n <\/div>\r\n \r\n <\/div>\r\n\r\n