[Rails 6] cocoon_ introduction

Development environment

• Rails 6.0.3.4
• yarn 1.22.4

table of contents __1) How to install cocoon

1. Introducing jQuery If you haven't done so yet
2. Introducing cocoon yarn add github: nathanvda / cocoon # c24ba53 command
3. Write in application.js >> import "cocoon";

2. Dynamically add forms * Chikajika will be UP
3. Give id and data attributes to the added form __

1) How to install cocoon

1. Introducing jQuery

__ If you haven't done so yet __

2. Introduction of cocoon

Gemfile

gem 'cocoon'
* Don't forget to restart the server with bundle install *
*I haven't been able to experiment, but I think it's okay if you don't write it in the gemfile (below)."yarn add"Because I am doing it. )*

Terminal

yarn add github:nathanvda/cocoon#c24ba53

It is OK if the following description is added to package.json after execution.

app/package.json

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

__ * Note: The Official Repository __ only describes how to install up to Rails 5. Therefore, although it is officially described as "yarn add @ nathanvda / cocoon", please note that it will not be added correctly unless it is the above command. __ ** About the reason why you have to add "# c24ba53" after cocoon __

2. Described in application.js

Javascript/packs/application.js

require('jquery') //It depends on jQuery, so it won't work without it
import "cocoon"   //Description for running cocoon

__ * Supplement: __ "require (" @ nathanvda / cocoon ")" in the explanation of the official website ← If you use this description together, two forms will be added dynamically when you click the button, so do not use it together Please be careful. I haven't tried it, but I think it works either way.

__ Installation is complete above. __

2) Dynamically add forms

Until you write the article I will post the article that I referred to when introducing it.

References Quitta Rails6 cocoon introduction: https://qiita.com/ashketcham/items/87e3db665ca9c66ce673 2020-06-27 slim I'm using: https://k-koh.hatenablog.com/entry/2020/06/27/125710 Qitta Gif video available: https://qiita.com/ohnitakahiro/items/dd0e44a7ebbaa6bf5ab8 Qitta Parents, children, grandchildren: https://qiita.com/hitochan/items/5a45a95e644492d66160 Rails Application Build Guides：https://rails.densan-labs.net/form/relation_register_form.html 　　 that's all.