Rails 7 で Cocoon gem を使用するにはどうすればよいですか?

Cocoon gem は、Rails アプリケーションのネストされたフォームの管理を簡素化する強力なツールです。と 繭を使用すると、ネストされたフォーム フィールドの動的な追加と削除を簡単に処理でき、シームレスなユーザー エクスペリエンスを提供できます。この記事では、 Rails 7 アプリケーションの Cocoon gem 実際の例を通して。

Cocoon Gem のインストールとセットアップ

まず、Rails 7 アプリケーションに Cocoon gem をインストールして構成しましょう。

Cocoon gem を Gemfile に追加します。

宝石「コクーン」

バンドル コマンドを実行して gem をインストールします。

バンドルインストール

JavaScript マニフェスト ファイルで Cocoon を必須にする (app/javascript/packs/application.js):

//= コクーンが必要です

jQuery がインストールされていることを確認してください。そうでない場合は、Gemfile に追加します。

gem「jquery-rails」

JavaScript マニフェスト ファイルに次の行を追加して、アプリケーションで jQuery を構成します。

//= jquery3 が必要

Cocoon を使用したネストされたフォームの実装

ブログ投稿とそれに関連するコメントをモデル化する単純な Rails アプリケーションがあると仮定しましょう。 Cocoon を使用して、ブログ投稿フォーム内のコメントの作成と削除を管理します。

関連付けを設定します。

# アプリ/モデル/post.rb
クラス Post < ApplicationRecord
has_many :コメントあり
accepts_nested_attributes_for :comments、allow_destroy: true
終わり

#app/models/comment.rb
クラス コメント < ApplicationRecord
所属:投稿
終わり

ポストフォームビューでネストされたフォームを構築します。

# 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| %
<%= 'comment_fields' をレンダリング、f: comment_fields %>
<%終了%>

<%= link_to_add_association 'コメントの追加', f, :comments %>
<%= f.% を送信>
<%終了%>

コメントフィールドの部分を作成します。

# app/views/posts/_comment_fields.html.erb
<div class="”nested-fields”">
<%= f.label :content %><%= f.text_field :content %>
<%= link_to_remove_association 'コメントの削除', f %>
</div>

Cocoon 機能を有効にするために必要な JavaScript を追加します。

// アプリ/javascript/packs/application.js
$(ドキュメント).on('ターボリンク:ロード', function() {
$('.nested-fields').cocoon();
});

Cocoon を使用したネストされたフォームの操作

必要な構成を実装したので、Cocoon の動作を見てみましょう。

1. ブログ投稿フォームを読み込むと、「コメントを追加」リンクが表示されます。
2. 「コメントを追加」をクリックすると、新しいコメントフィールドのセットがフォームに動的に追加されます。
3. コメントを削除するには、そのコメントに関連付けられている「コメントを削除」リンクをクリックします。
4. フォームが送信されると、投稿とそれに関連するコメントがデータベースに保存されます。

結論： 

Cocoon gem は、Rails 7 アプリケーションでのネストされたフォームの処理を簡素化します。この記事で説明する手順に従うと、ネストされたフォーム フィールドの動的な追加と削除をシームレスに管理でき、ユーザー エクスペリエンスが向上します。 Cocoon を Rails プロジェクトに組み込むと、複雑なフォームを効率的に処理し、データ管理を強化できます。特定の要件に合わせて、さまざまなオプションとカスタマイズ機能を試してください。 Rails 開発ニーズに対応できる信頼できるパートナーをお探しですか?これ以上探さない。 レールカーマ 包括的なサービスを提供します Rails開発サービス これには、初期設計から展開、メンテナンスまでのすべてが含まれます。