{"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":"hur-man-anvander-cocoon-gem-in-rails-7","status":"publish","type":"post","link":"https:\/\/www.railscarma.com\/sv\/blogg\/hur-man-anvander-cocoon-gem-in-rails-7\/","title":{"rendered":"Hur anv\u00e4nder man kokongsten i 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

The Cocoon gem \u00e4r ett kraftfullt verktyg som f\u00f6renklar hanteringen av kapslade formul\u00e4r i Rails-applikationer. Med Kokong<\/a>, kan du enkelt hantera dynamiska till\u00e4gg och borttagningar av kapslade formul\u00e4rf\u00e4lt, vilket ger en s\u00f6ml\u00f6s anv\u00e4ndarupplevelse. I den h\u00e4r artikeln kommer vi att utforska hur man anv\u00e4nder Cocoon p\u00e4rla i en Rails 7-applikation<\/strong> genom ett praktiskt exempel.<\/span><\/p>

Installera och st\u00e4lla in Cocoon Gem<\/b><\/h3>

Till att b\u00f6rja, l\u00e5t oss installera och konfigurera Cocoon p\u00e4rla i en Rails 7-applikation.<\/span><\/p>

L\u00e4gg till Cocoon p\u00e4rla till din Gemfile:<\/span><\/p>

p\u00e4rla 'kokong'<\/strong><\/p>

K\u00f6r buntkommandot f\u00f6r att installera \u00e4delstenen:<\/span><\/p>

paketinstallation<\/strong><\/p>

Kr\u00e4v Cocoon i din JavaScript-manifestfil (<\/span>app\/javascript\/packs\/application.js<\/span>):<\/span><\/p>

\/\/= kr\u00e4ver kokong<\/strong><\/p>

Se till att du har installerat jQuery. Om inte, l\u00e4gg till den i din Gemfile:<\/span><\/p>

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

Konfigurera jQuery i din applikation genom att l\u00e4gga till f\u00f6ljande rad i din JavaScript-manifestfil:<\/span><\/p>

\/\/= kr\u00e4ver jquery3<\/strong><\/p>

\u00a0<\/p>

Implementera kapslade formul\u00e4r med Cocoon<\/b><\/h3>

L\u00e5t oss anta att vi har en enkel Rails-applikation som modellerar ett blogginl\u00e4gg och dess tillh\u00f6rande kommentarer. Vi kommer att anv\u00e4nda Cocoon f\u00f6r att hantera skapande och borttagning av kommentarer i blogginl\u00e4ggsformul\u00e4ret.<\/span><\/p>

Skapa f\u00f6reningarna:<\/span><\/p>

# app\/modeller\/post.rb<\/strong>
klass Post < ApplicationRecord
har_m\u00e5nga :kommentarer
accepts_nested_attributes_for :comments, allow_destroy: true
slutet<\/strong><\/p>

#app\/models\/comment.rb
<\/strong>klass Kommentar < ApplicationRecord
<\/strong>tillh\u00f6r_till :post
<\/strong>slutet<\/strong><\/p>

Bygg det kapslade formul\u00e4ret i postformul\u00e4rvyn:<\/span><\/p>

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

<%= link_to_add_association 'L\u00e4gg till kommentar', f, :kommentarer %>
<\/strong><%= f.skicka %>
<\/strong><% slut %><\/strong><\/p>

Skapa en del av kommentarsf\u00e4lten:<\/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 'Ta bort kommentar', f %>
<\/strong><\/div>.<\/strong><\/p>

L\u00e4gg till n\u00f6dv\u00e4ndig JavaScript f\u00f6r att aktivera Cocoon-funktionalitet:<\/span><\/p>

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

<\/strong><\/p>

Arbeta med kapslade formul\u00e4r med Cocoon<\/b><\/h3>

Nu n\u00e4r vi har implementerat de n\u00f6dv\u00e4ndiga konfigurationerna, l\u00e5t oss se Cocoon i aktion.<\/span><\/p>

  1. N\u00e4r du laddar blogginl\u00e4ggsformul\u00e4ret ser du l\u00e4nken "L\u00e4gg till kommentar".<\/span><\/li>
  2. Genom att klicka p\u00e5 "L\u00e4gg till kommentar" kommer en ny upps\u00e4ttning kommentarf\u00e4lt dynamiskt att l\u00e4ggas till i formul\u00e4ret.<\/span><\/li>
  3. F\u00f6r att ta bort en kommentar, klicka p\u00e5 l\u00e4nken "Ta bort kommentar" som \u00e4r kopplad till den kommentaren.<\/span><\/li>
  4. N\u00e4r formul\u00e4ret har skickats kommer inl\u00e4gget och dess tillh\u00f6rande kommentarer att sparas i databasen.<\/span><\/li><\/ol>

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

    Cocoon-\u00e4delstenen f\u00f6renklar hanteringen av kapslade formul\u00e4r i Rails 7-applikationer. Genom att f\u00f6lja stegen som beskrivs i den h\u00e4r artikeln kan du s\u00f6ml\u00f6st hantera dynamiska till\u00e4gg och borttagningar av kapslade formul\u00e4rf\u00e4lt, vilket f\u00f6rb\u00e4ttrar anv\u00e4ndarupplevelsen. Inkorporera Cocoon i dina Rails-projekt f\u00f6r att effektivt hantera komplexa formul\u00e4r och f\u00f6rb\u00e4ttra datahanteringen. Experimentera med dess olika alternativ och anpassningsfunktioner f\u00f6r att passa dina specifika krav. Letar du efter en p\u00e5litlig partner f\u00f6r att hantera dina Rails-utvecklingsbehov? Kolla inte vidare. RailsCarma<\/a> erbjuder omfattande R\u00e4lsutvecklingstj\u00e4nster<\/a> som omfattar allt fr\u00e5n initial design till drifts\u00e4ttning och underh\u00e5ll.\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
    relaterade inl\u00e4gg<\/div>\r\n
    \r\n\r\n
    \r\n
    \r\n \r\n\r\n \"Ruby\r\n\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n Ruby on Rails f\u00f6r MLOps: En komplett guide till ML-distribution <\/a>\r\n\r\n <\/div>\r\n
    \r\n
    \r\n \r\n\r\n \"Agentiska\r\n\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n Att bygga Agentic AI-applikationer med 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 Vad \u00e4r Offliberty Ruby Gem och hur fungerar den? <\/a>\r\n\r\n <\/div>\r\n
    \r\n
    \r\n \r\n\r\n \"Bygg\r\n\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n Hur man bygger en skalbar SaaS-plattform med Ruby on Rails <\/a>\r\n\r\n <\/div>\r\n \r\n <\/div>\r\n\r\n