의 목적

gem의cocoon을 사용하여 부자손자의 여러 장의 표와 여러 개의 데이터를 동시에 저장합니다.
https://qiita.com/hitochan/items/5a45a95e644492d66160
이곳 보도에서 부자손자 관계를 맺을 수 있다!
그리고 나는 아이가 많고, 그 아이가 손자가 많은 상황도 생각해 봤다.
자신이 전혀 이해하지 못했기 때문에 필기로 남겼다.

전제 조건

https://qiita.com/hitochan/items/5a45a95e644492d66160
저는 이쪽 기사를 참고하여 코온에서 부자손자를 동시에 보내는 것을 이해합니다.
제가 근육 단련 기록 프로그램을 만들고 있어요.
부모님 이벤트
자 menus
손문sets
이런 패턴 관계.

사용법

Cocoon은 두 개의 지원 함수를 정의합니다.
①　link_to_add_association
②　link_to_remove_association
두루뭉술하게 말하다
① 창 추가
② 창 삭제
https://i.gyazo.com/81032117760b22757c77d404e7050deb.gif
지금 스스로 만든 것이라 도중에 더럽지만 인상으로는 그렇다.

설치 예

메뉴 추가 버튼

오늘 이렇게 근력 단련을 했다고 이벤트에 기고했습니다.
그 투고에 근육 단련 메뉴(menu)가 있어요.
그리고 그 메뉴의 무게가 얼마인지, 몇 번 넣었는지(menu set)
투고하다.
여기는 보기 부분을 중심으로 한다.
new.html.erb

<div class="NewRecord" id="NewRecord">
  <div class="NewRecord＿Box"> 
    <h1>トレーニングを記録する</h1>
    <div class="NewRecord＿Box＿Form">
      <%= render 'form', path: events_path, method: :post, event: @event %>
    </div>
  </div>
</div>

↑ 우선 새로운 투고 화면에 훈련을 기록한다.
_form.html.erb

 <div class="text-right">
    <%= link_to_add_association 'メニュー追加', f, :menus,
      class: 'btn btn-success',
      data: {
        association_insertion_node: '#detail-association-insertion-point',
        association_insertion_method: 'append' }
     %>


  </div>

  <div class="form-group" id='detail-association-insertion-point'>
    <%= f.fields_for :menus do |menu| %>
      <%= render 'menu_fields', f: menu %>

    <% end %>
  </div>

↑ 창 내용의 일부 템플릿을 사용합니다.
이 안의 링크to_add_association 근육 단련 메뉴 추가 버튼.(녹색 메뉴 추가 버튼)
link_to_add_네 개의 매개 변수가 있다.
name: the text to show in the link
f: the form builder
association: the name of the association (plural) of which a new instance needs to be added (symbol or string).
html_options:
자기가 어떤 사람인지
링크에 표시되는 텍스트
봉화
f: 창 빌더
봉화
association: 새로운 실례와 관련된 이름 (기호나 문자열) 을 추가해야 합니다.
봉화many와 menus가 조합되어 있기 때문에:menus
html_추가 i-options
여기서 추가 메뉴 버튼을 눌렀을 때 어떻게 하죠?이런 옵션.
data-association-insertion-node : the jquery selector of the node as string, or a function that takes the link_to_add_association node as the parameter and returns a node. Default: parent node
data-association-insertion-method : jquery method that inserts the new data. before, after, append, prepend, etc. Default: before
??네??
데이터 asciation-insertion-node: 추가 단추를 눌렀을 때 데이터를 여기에 삽입합니다
데이터-SASciation-insertion method: 추가된 부분을 어디에 삽입합니까?이게 앞이야 뒤야?
_form.html.erb

  <div class="form-group" id='detail-association-insertion-point'>
    <%= f.fields_for :menus do |menu| %>
      <%= render 'menu_fields', f: menu %>

    <% end %>
  </div>

이번에 id='detail-asciation-insertion point'에 포함된 이div 요소를 추가합니다.
appeend이니까 거기에 추가해.
※ 코코인에서 동적 양식 추가를 진행하려면 일부 템플릿을 사용해야 합니다.파일 이름도 불명필드가 필요합니다.

추가 버튼 설정

이론적으로 이제 메뉴 설정 버튼의 일련의 절차를 한 번 더 하면 된다.
_menu_fields.html.erb

<div class="nested-fields">
  <%= f.hidden_field :id %>

  <%= f.collection_select :name, f.object.selectable_menus, :name, :name, prompt: "何をしましたか？", class: 'form-control' %>

    <%= link_to_add_association 'セット追加', f, :menu_sets,
      class: 'btn btn-success',
      data: {
        data_association_insertion_traversal: 'closest',
        association_insertion_method: 'append' }
     %>

  <%= link_to_remove_association '削除', f, class: 'btn btn-default' %>

  <div id="menu_set-association-insertion-point">
    <%= f.fields_for :menu_sets do |menu_set| %>
      <%= render 'menu_set_fields', f: menu_set %>
    <% end %>
  </div>
</div>

포인트는 여기.
data_association_insertion_traversal: 'closest'
clossest에서 지정하면 설정의 아버지로 메뉴에 연결된 그룹을 추가할 수 있습니다.
data-association-insertion-traversal : the jquery traversal method to allow node selection relative to the link. closest, next, children, etc. Default: absolute selection

버튼 삭제

이미 등장했지만 이것까지 더하면 추가적인 걸 지울 수 있어.

<%= link_to_remove_association '削除', f, class: 'btn btn-default' %>

끝맺다

비록 막 공부를 시작했지만, 나는 내가 이렇게 총결하면 이해가 뿌리를 내리게 할 수 있다고 생각한다.
나는 잘못해도 이렇게 출력하는 것이 매우 중요하다고 느꼈다.아직 이해가 안 가는 부분이 많다고 생각합니다. 지적해 주시기 바랍니다.

참고 문헌

https://qiita.com/hitochan/items/5a45a95e644492d66160
https://rails.densan-labs.net/form/relation_register_form.html
https://github.com/nathanvda/cocoon