Wie verwende ich Cocoon Gem in Rails 7?

Das Cocoon-Gem ist ein leistungsstarkes Tool, das die Verwaltung verschachtelter Formulare in Rails-Anwendungen vereinfacht. Mit Kokonkönnen Sie verschachtelte Formularfelder einfach dynamisch hinzufügen und entfernen und sorgen so für ein nahtloses Benutzererlebnis. In diesem Artikel werden wir untersuchen, wie man das nutzt Cocoon-Juwel in einer Rails 7-Anwendung anhand eines praktischen Beispiels.

Installieren und Einrichten des Cocoon Gem

Lassen Sie uns zunächst das Cocoon-Gem in einer Rails 7-Anwendung installieren und konfigurieren.

Fügen Sie den Cocoon-Edelstein zu Ihrer Gemfile hinzu:

Edelstein „Kokon“

Führen Sie den Bundle-Befehl aus, um das Gem zu installieren:

Bundle-Installation

Erfordern Sie Cocoon in Ihrer JavaScript-Manifestdatei (app/javascript/packs/application.js):

//= Kokon erforderlich

Stellen Sie sicher, dass Sie jQuery installiert haben. Wenn nicht, fügen Sie es Ihrer Gemfile hinzu:

gem 'jquery-rails'

Konfigurieren Sie jQuery in Ihrer Anwendung, indem Sie die folgende Zeile zu Ihrer JavaScript-Manifestdatei hinzufügen:

//= erfordert jquery3

Implementierung verschachtelter Formulare mit Cocoon

Nehmen wir an, wir haben eine einfache Rails-Anwendung, die einen Blog-Beitrag und die zugehörigen Kommentare modelliert. Wir werden Cocoon verwenden, um die Erstellung und Entfernung von Kommentaren im Blog-Beitragsformular zu verwalten.

Richten Sie die Zuordnungen ein:

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

#app/models/comment.rb
Klassenkommentar < ApplicationRecord
gehört_zu :post
Ende

Erstellen Sie das verschachtelte Formular in der Post-Formular-Ansicht:

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

<%= link_to_add_association 'Kommentar hinzufügen', f, :comments %>
<%= f.submit %>
<% Ende %>

Erstellen Sie einen Teil für die Kommentarfelder:

# app/views/posts/_comment_fields.html.erb
<div class="”nested-fields”">
<%= f.label :content %><%= f.text_field :content %>
<%= link_to_remove_association 'Kommentar entfernen', f %>
</div>

Fügen Sie das erforderliche JavaScript hinzu, um die Cocoon-Funktionalität zu aktivieren:

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

Arbeiten mit verschachtelten Formularen mit Cocoon

Nachdem wir nun die notwendigen Konfigurationen implementiert haben, sehen wir uns Cocoon in Aktion an.

1. Wenn Sie das Blog-Beitragsformular laden, wird der Link „Kommentar hinzufügen“ angezeigt.
2. Wenn Sie auf „Kommentar hinzufügen“ klicken, werden dem Formular dynamisch neue Kommentarfelder hinzugefügt.
3. Um einen Kommentar zu entfernen, klicken Sie auf den Link „Kommentar entfernen“, der diesem Kommentar zugeordnet ist.
4. Beim Absenden des Formulars werden der Beitrag und die zugehörigen Kommentare in der Datenbank gespeichert.

Abschluss: 

Das Cocoon-Gem vereinfacht die Handhabung verschachtelter Formulare in Rails 7-Anwendungen. Wenn Sie die in diesem Artikel beschriebenen Schritte befolgen, können Sie dynamische Hinzufügungen 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ässigen Partner für Ihre Rails-Entwicklungsanforderungen? Suchen Sie nicht weiter. SchienenCarma Angebote umfassend Rails-Entwicklungsdienstleistungen die alles vom ersten Entwurf bis zur Bereitstellung und Wartung umfassen.