Hur använder man kokongsten i Rails 7?

The Cocoon gem är ett kraftfullt verktyg som förenklar hanteringen av kapslade formulär i Rails-applikationer. Med Kokong, kan du enkelt hantera dynamiska tillägg och borttagningar av kapslade formulärfält, vilket ger en sömlös användarupplevelse. I den här artikeln kommer vi att utforska hur man använder Cocoon pärla i en Rails 7-applikation genom ett praktiskt exempel.

Installera och ställa in Cocoon Gem

Till att börja, låt oss installera och konfigurera Cocoon pärla i en Rails 7-applikation.

Lägg till Cocoon pärla till din Gemfile:

pärla 'kokong'

Kör buntkommandot för att installera ädelstenen:

paketinstallation

Kräv Cocoon i din JavaScript-manifestfil (app/javascript/packs/application.js):

//= kräver kokong

Se till att du har installerat jQuery. Om inte, lägg till den i din Gemfile:

pärla 'jquery-rails'

Konfigurera jQuery i din applikation genom att lägga till följande rad i din JavaScript-manifestfil:

//= kräver jquery3

Implementera kapslade formulär med Cocoon

Låt oss anta att vi har en enkel Rails-applikation som modellerar ett blogginlägg och dess tillhörande kommentarer. Vi kommer att använda Cocoon för att hantera skapande och borttagning av kommentarer i blogginläggsformuläret.

Skapa föreningarna:

# app/modeller/post.rb
klass Post < ApplicationRecord
har_många :kommentarer
accepts_nested_attributes_for :comments, allow_destroy: true
slutet

#app/models/comment.rb
klass Kommentar < ApplicationRecord
tillhör_till :post
slutet

Bygg det kapslade formuläret i postformulärvyn:

# app/views/posts/_form.html.erb
<%= form_with(modell: post) gör |f| %>
<%= f.label :title %>
<%= f.text_field :title %>
<%= f.fields_for :kommentarer gör |comment_fields| %
<%= rendera 'comment_fields', f: comment_fields %>
<% slut %>

<%= link_to_add_association 'Lägg till kommentar', f, :kommentarer %>
<%= f.skicka %>
<% slut %>

Skapa en del av kommentarsfälten:

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

Lägg till nödvändig JavaScript för att aktivera Cocoon-funktionalitet:

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

Arbeta med kapslade formulär med Cocoon

Nu när vi har implementerat de nödvändiga konfigurationerna, låt oss se Cocoon i aktion.

1. När du laddar blogginläggsformuläret ser du länken "Lägg till kommentar".
2. Genom att klicka på "Lägg till kommentar" kommer en ny uppsättning kommentarfält dynamiskt att läggas till i formuläret.
3. För att ta bort en kommentar, klicka på länken "Ta bort kommentar" som är kopplad till den kommentaren.
4. När formuläret har skickats kommer inlägget och dess tillhörande kommentarer att sparas i databasen.

Slutsats: 

Cocoon-ädelstenen förenklar hanteringen av kapslade formulär i Rails 7-applikationer. Genom att följa stegen som beskrivs i den här artikeln kan du sömlöst hantera dynamiska tillägg och borttagningar av kapslade formulärfält, vilket förbättrar användarupplevelsen. Inkorporera Cocoon i dina Rails-projekt för att effektivt hantera komplexa formulär och förbättra datahanteringen. Experimentera med dess olika alternativ och anpassningsfunktioner för att passa dina specifika krav. Letar du efter en pålitlig partner för att hantera dina Rails-utvecklingsbehov? Kolla inte vidare. RailsCarma erbjuder omfattande Rälsutvecklingstjänster som omfattar allt från initial design till driftsättning och underhåll.