레일 부트 스트랩 탭으로 중첩 된 필드

Question

레일에 중첩 된 폼을 만들려고 시도하지만 부트 스트랩 탭을 사용하여 접을 수 있습니다.
나는 현재 다음과 같습니다

_form.html.rb

<%= f.fields_for :register_members do |rm| %> 

    <%= render 'register_member_fields', f: rm %> 
    <% end %> 

    <div class="links"> 
    <%= link_to_add_association "Add Registration", f, :register_members, class: "btn btn-success btn-sm text-white" %> 
    </div> 

_register_member_fields.html.erb

방법 중첩 된 필드가 분명히

<div class="nested-fields"> 
    <div class="panel panel-default fields"> 

    <div class="panel-heading" role="tab" id="heading<%= f.index.to_s %>"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" href="#tabCollapse<%= f.index.to_s %>" aria-expanded="true" aria-controls="tabCollapse<%= f.index.to_s %>"> 
      Registration 
      <span class="panel-icon"></span> 
     </a> 
     </h4> 
    </div><!-- End .panel-heading --> 

    <div id="tabCollapse<%= f.index.to_s %>" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading<%= f.index.to_s %>"> 
     <div class="panel-body"> 
     <div class="field"> 
      <%= f.label "Name", class: "input-desc" %> 
      <%= f.text_field :name, class: "form-control" %> 
     </div> 
     <div class="field"> 
      <%= f.label :email, class: "input-desc" %> 
      <%= f.email_field :email, class: "form-control" %> 
     </div> 
     <div class="field"> 
      <%= f.hidden_field :_destroy %> 
      <%= link_to_remove_association("Remove Registration", f) %> 
     </div> 
     </div><!-- End .panel-body --> 
    </div><!-- End .panel-collapse --> 

    </div><!-- End .panel --> 
</div> 

이 생성됩니다 보석 cocoon를 사용하여 작업 새로운 _register_member_field은 붕괴를 위해 id을 사용합니다. 즉, 패널 제목 중 하나를 클릭하면 중첩 된 양식 중 하나가 접히고 열립니다.
제대로 작동하려면 어떻게해야합니까?

Answer 1

그래, 내가 레일에서 말할 수있는 것 & JQUERY - 만약 당신이 DSL이나 모델을 필요로하지 않고 상황에 임의로 이드를 붙이면 코드 냄새가 난다. 일반적으로 다른 프로그래머는 보편적 인 방식으로 동일한 작업을 수행하는 다른 방법을 사용합니다.

내가하고있는 일은 본질적으로 Rails 코드를 사용하여 JQuery 코드를 사용하기 위해 HTML 코드를 잼 ID #에 쓰려고한다는 것입니다.

당신은 이미 JQUERY를 사용하는 누에 고치가 있기 때문에 원하는 CSS/HTML 요소를 타겟팅하기 위해 더 나은 JQUERY 선택기 (google '.selector')를 사용하지 않는 것이 좋습니다 ... DOM을 알고 있다면, 이 점에서 좋은 일을 다시합니다. '.child'를 타겟팅하는 것이 좋습니다. 이 주제에 대한 몇 가지 트릭이 있습니다. Link. 이렇게하면 이미 존재하는 것을 사용하고 있기 때문에 고유 한 값의 필요성이 완화됩니다.

이 아름다운 부분은 누에 고치의 패턴이며 기본적으로 이미 "부모"인 nested-fields을 타겟팅하고 있습니다. 콜백에 대한 누에 고치 문서를 읽는 경우 이것이 어떻게 작동하는지 예를 들어 설명합니다.

기본적으로, 당신은 nested-fields의 아코디언 동등한를 둘 필요 (& 모든 필드를 사용하는 하나 개의 이름을 선택 - 예 : '아코디언 필드')를 각각의 특정 붕괴 주위에 & 다음 클릭에 대한 아코디언을 위해 jQuery를 가리 킵니다 '아코디언 필드'의 부모를 타겟팅 할 수 있습니다. http://demos.jquerymobile.com/1.4.3/collapsible-dynamic/#&ui-state=dialog

나는 그것이 몇 달 전에 한 번 가고있어 - -

보너스, 여기에 동적으로 대상 아코디언 필드의 예하지만 난 그것을 해부하는 데 시간이 필요합니다 -이 기술 & 때문에 그냥 여기에 게시 실제로 전체 코드를 작성하는 것보다 빠릅니다. JQUERY를 사용하여 부모/자식 전략을 구현하는 모든 장애를 발견하면 알려주십시오.