More than 3 years have passed since last update.

【Rails6】cocoon_導入方法

Last updated at 2020-11-19Posted at 2020-10-29

開発環境

目次
１）cocoon導入方法　←
　　1. jQuery導入　まだの方はこちら
　　2. cocoon導入　
　　3. application.js へ「import "cocoon";」を記述
２）動的にフォームを追加
３）追加するフォームにidやdata属性を付与する

#1） cocoon導入方法
##　1. jQuery導入
まだの方はこちら

##　2. cocoon導入

Gemfile

gem 'cocoon'
＊ bundle installとサーバーを立ち上げ直すの忘れないように ＊
* もしかしたらgemfileへの記述なくても大丈夫かもしれません。（次の工程で"yarn add"するので。） *

ターミナル

yarn add github:nathanvda/cocoon#c24ba53

実行後にpackage.jsonへ以下の記述が追加されていればOKです。

app/package.json

"cocoon": "github:nathanvda/cocoon#c24ba53"

__*補足：公式レポジトリ__には、Rails5までのインストール方法しか説明されていません。そのため、公式には「yarn add @nathanvda/cocoon」と記述されていますが、上記コマンドでなければ、正しく追加されませんので注意してください。
　＊＊cocoonの後ろに"#c24ba53"をつけなければいけない理由について

##　2. application.js へ記述

Javascript/packs/application.js

require('jquery') //jQeryに依存しているため、ないと動かないです
import "cocoon"   //cocoonを動かすための記述

__*補足：__公式サイトの説明にある「require("@nathanvda/cocoon")」←この記述と併用したらボタンをクリックした時に２つずつ動的にフォームが追加されるので併用しないように気をつけてください。試してないですが、どっちでも動くということなんだと思います。

上記で導入は完了です。

続きはこちら

以上です。