[ruby on rails] js를 통한 partial 조각 렌더링

1. 구현할 기능은?

• 특정 옵션이 선택되었을 때 해당 옵션에 관한 데이터 히스토리를 보여주려고 합니다.
• 옵션은 select 태그로 이루어져 있으며 저는 과제로 예를 들어보겠습니다.
• 데이터 히스토리는 과제에 코멘트를 달거나 수정할 때마다 DB에 데이터를 쌓고 생성된 시간을 내림차로 정리하여 테이블로 나타낼 것입니다.

2. 로직 생각해보기

처음엔 <script> 태그 안에서 뷰 조각을 렌더링하려고 했으나, 컨트롤러에서 정의한 @변수를 스크립트 내에서 불러내는 방안을 찾지 못해서 정석대로 시도해보았습니다.

1. script 태그 안에서 ajax를 날린뒤 컨트롤러에서 js파일을 렌더링합니다.
2. js 파일에서 컨트롤러에서 정의된 @변수를 담아 뷰 조각을 렌더링합니다.
3. 뷰 조각에서 구현하고 싶었던 히스토리 테이블을 나타냅니다.

3. 직접 코드 구현하기

index.html.erb

<script>
	$("[id='option_select']").change(function(){

      var id = $(this).val();
      $.ajax({
        cache: false,
        headers: {
        'Content-Type': "application/json",
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
        url: 'comments/get_comment/'+ id,
        dataType: "script",
        success: function(data){

      })
    })
</script>

• 특정 옵션이 변경될 때마다 ajax를 요청했습니다.
• 여기서 중요한 점은 dataType을 "script"로 해야된다는 점입니다. 저는 컨트롤러에서 js로 응답할 것이기 때문이죠.

comments_controller.rb

  def get_comment
   
    @history = ProjectComment.where(option_id: params[:id]).order(created_at: :desc)
    render "comment"
    
  end

• 옵션 id에 해당하는 코멘트 목록을 불러옵니다.
• 생성시간을 내림차로 정리하여 @history 변수에 저장합니다.
• render "comment"를 통해 comment.js.erb 파일을 렌더링합니다.

comment.js.erb

$('#comment').html("<%= escape_javascript render( 'form', history: @history) %>");

• id가 comment인 dev 태그에 _form.html.erb 뷰 조각을 렌더링해줍니다.
• 컨트롤러에서 정의한 @history를 뷰 조각으로 넘겨줍니다.

_form.html.erb

<table>
    <thead>
      <tr class="center aligned">
        <th>코멘트</th>
        <th>수정된 시간</th>
      </tr>
    </thead>
    <tbody>
      <% history&.each do |h| %>
        <tr class="center aligned">
          <td><%= comment.body %></td>
          <td><%= comment.created_at %></td>
        </tr>
      <% end %>
    </tbody>
  </table>

• comment.js.erb에서 넘겨준 history로 테이블을 구성합니다.
• created_at은 각 히스토리가 생성된 시간이므로 코멘트가 수정된 시간으로 생각할 수 있습니다.