Come utilizzare la gemma bozzolo in Rails 7?

La gemma Cocoon è un potente strumento che semplifica la gestione dei moduli nidificati nelle applicazioni Rails. Con Bozzolo, puoi gestire facilmente aggiunte e rimozioni dinamiche di campi modulo nidificati, offrendo un'esperienza utente fluida. In questo articolo esploreremo come utilizzare il file Gemma Cocoon in un'applicazione Rails 7 attraverso un esempio pratico.

Installazione e configurazione di Cocoon Gem

Per iniziare, installiamo e configuriamo Cocoon gem in un'applicazione Rails 7.

Aggiungi la gemma Cocoon al tuo Gemfile:

gemma 'bozzolo'

Esegui il comando bundle per installare il gem:

installazione del pacchetto

Richiedi Cocoon nel file manifest JavaScript (app/javascript/packs/application.js):

//= richiede bozzolo

Assicurati di avere jQuery installato. In caso contrario, aggiungilo al tuo Gemfile:

gemma 'jquery-rails'

Configura jQuery nella tua applicazione aggiungendo la seguente riga al tuo file manifest JavaScript:

//= richiede jquery3

Implementazione di moduli nidificati con Cocoon

Supponiamo di avere una semplice applicazione Rails che modella un post di blog e i relativi commenti associati. Utilizzeremo Cocoon per gestire la creazione e la rimozione dei commenti all'interno del modulo del post del blog.

Configurare le associazioni:

# app/modelli/post.rb
class Post < ApplicationRecord
has_many: commenti
accetta_nested_attributes_for :comments,allow_destroy: true
FINE

#app/models/comment.rb
classe Commento < ApplicationRecord
appartiene_a :post
FINE

Costruisci il modulo nidificato nella visualizzazione del modulo post:

# app/views/posts/_form.html.erb
<%= form_with(modello: post) do |f| %>
<%= f.etichetta :titolo %>
<%= f.campo_testo :titolo %>
<%= f.fields_for :comments do |comment_fields| %
<%= visualizza 'campi_commento', f: campi_commento %>
<% fine %>

<%= link_to_add_association 'Aggiungi commento', f, :comments %>
<%= f.invia %>
<% fine %>

Crea un partial per i campi dei commenti:

# app/views/posts/_comment_fields.html.erb
<div class="”nested-fields”">
<%= f.label :contenuto %><%= f.campo_testo :contenuto %>
<%= link_to_remove_association 'Rimuovi commento', f %>
</div>

Aggiungi il JavaScript necessario per abilitare la funzionalità Cocoon:

// app/javascript/packs/application.js
$(documento).on('turbolinks:carico', funzione() {
$('.nested-fields').cocoon();
});

Lavorare con moduli nidificati utilizzando Cocoon

Ora che abbiamo implementato le configurazioni necessarie, vediamo Cocoon in azione.

1. Quando carichi il modulo del post del blog, vedrai il collegamento "Aggiungi commento".
2. Facendo clic su "Aggiungi commento" verrà aggiunto dinamicamente un nuovo set di campi di commento al modulo.
3. Per rimuovere un commento, fare clic sul collegamento "Rimuovi commento" associato a quel commento.
4. Una volta inviato il modulo, il post e i commenti associati verranno salvati nel database.

Conclusione: 

La gemma Cocoon semplifica la gestione dei moduli annidati nelle applicazioni Rails 7. Seguendo i passaggi descritti in questo articolo, puoi gestire senza problemi le aggiunte e le rimozioni dinamiche dei campi del modulo nidificati, migliorando l'esperienza dell'utente. Incorpora Cocoon nei tuoi progetti Rails per gestire in modo efficiente moduli complessi e migliorare la gestione dei dati. Sperimenta le sue varie opzioni e funzionalità di personalizzazione per soddisfare le tue esigenze specifiche. Stai cercando un partner affidabile per gestire le tue esigenze di sviluppo di Rails? Non guardare oltre. RailsCarma offerte complete Servizi di sviluppo delle rotaie che comprendono tutto, dalla progettazione iniziale all'implementazione e alla manutenzione.