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

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

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

gem ‘cocoon’

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

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.

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

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. 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.