전제

Rails에서 ajax를 복습 할 수있는 기회가 생겼으므로 잊지 않도록 절차를 적어 둡니다.
이런 느낌의 작품 일람 페이지(work#index)에서 각 작품(work#show)의 정보를 비동기 통신으로 읽어 모달 윈도우에 표시합니다. (이번 기사에는 모달 윈도우의 구현은 포함되어 있지 않습니다)


「카테고리:」의 기술이 이상하게 되어 있습니다만, , , 다음에 다시 합니다.

기본 구조

이번에 작성한 ajax의 구조는 이런 형태입니다.

work_show.js

$('.work__img').on('click', function(e){
    e.preventDefault();
    var $workId = $(this).data('id');

    $.ajax({
      type: 'GET', // HTTPメソッド
      url: '/works/' + $workId, // type(GET)でアクセスしたいURL
      data: { id: $workId }, // urlに送りたいデータ
      dataType: 'json'  //データの型, textなどもある
      })
      .done(function (data) {
        // 成功した時の処理
      })
      .fail(function (){
        // 失敗した時の処理
      });
  });

이미지( .work__img 라는 클래스가 부여하고 있다)를 클릭하면, 이벤트가 발화합니다.
그대로라면, 다음 화면( work#show 으로 표시되는 화면)으로 화면이 천이해 버리므로 e.preventDefault(); 로 디폴트의 액션(화면의 천이)을 정지합니다.

위의 코드에서는 GET 에서 /works/:id를 방문하여 work#show 액션을 표현하고 있습니다만, 각 작품(work)의 id는 작품 목록 페이지(work#index)의 어디에 도 나오지 않습니다.

맞춤 데이터 속성

그래서 커스텀 데이터 속성을 이용하여 뷰에 work.id 를 포함시켜 jQuery(이번에는 work_show.js )로 작품의 id를 다룰 수 있도록 합니다.

▼그 코드가 이쪽

views/works/index.html.haml

= image_tag work.images[0].url, class: "works__img", data: {id: work.id }

이 코드를 HTML로 작성하면 이렇게 됩니다.

<img src="＃" class="works__img" data-id="3">

이, data-id="3" 의 부분이 커스텀 데이터 속성으로, 이렇게 하는 것으로, JS에서는 $('img').data('id'); 등의 형태로 작품의 ID를 이용할 수 있습니다.

▼커스텀 데이터 속성에 대해서는 이쪽의 해설이 정중하고 도움이 되었습니다
jQuery의 data()로 속성을 취득·설정·변경하는 방법 정리!

▼haml에서의 쓰는 방법에 대해서는 이쪽
haml에서 HTML5 사용자 지정 데이터 속성(data-*)을 정의하는 방법

컨트롤러 편집

그리고 이번에는 일반적인 경우 (HTML)와 비동기 통신 (ajax)으로 컨트롤러의 처리를 나누므로 컨트롤러에 정보를 추가했습니다.

works_controller.rb

def show
    @work = Work.find(params[:id])
    respond_to do |format|
      format.html
      format.json
    end
end

위의 예라면, work/show 액션이 불려 갔을 때, 아무것도 처리를 쓰지 않으면 디폴트 HTML의 포맷이, json 형식으로 불렸을 경우에는, json의 포맷이 불립니다.

이 때의, json 형식의 포맷은 jbuilder 로 정의합니다. 이 근처는 이해가 모호합니다만, 포맷은 view 같은 것? 라고 생각하면 좋은 것 같고, 이번 work#show의 포맷의 경우는 views/works 안에, show.json.jbuilder
▼이 근처의 문장도 참조했습니다
respond_to를 초보자를 위한 완전 분해

jbuilder 설명

json 데이터는 jbuilder에서 만들었습니다.

views/works/show.json.jbuilder

json.id  @work.id
json.name  @work.name
　...
json.language @work.language
json.softwear @work.softwear
json.description @work.description

이 근처는 좀 더 스마트한 쓰는 방법이 있을 것 같고, 곧 리팩토링 해 보고 싶습니다만, 상기의 형태로 json 형식의 데이터를 작성할 수 있습니다.

▼이 기사가 정중하게 해설 해 주고 있었으므로, 나중에 검토해 보겠습니다
Rails jbuilder를 작성하는 방법과 편리한 관용구와 방법

view에 반영 (완료 된 view 및 jQuery 코드)

views/works/index.html.haml

.row.d-flex.justify-content-center
  %main.works#works
    - @works.each do |work|
      = link_to work_path(work.id), class: 'works__frame' do
        = image_tag work.images[0].url, class: "works__img", data: {id: work.id }

#modal-outer.modal-outer
  .modal-window
    #modal

work_show.js

$(document).on('turbolinks:load', function(){
  function buildHtml(data){
    var workContainer = `<main class="work row">
    ~ 中略 ~
    <h3 class="work__info__title">${data.name}</h3>
    ~ 中略 作品画像や説明など色々な要素をここで記述しています~
    </main>`;
    return workContainer;
  };

  $workImg.on('click', function(e){
    var $workId = $(this).data('id'); //カスタムデータ属性”data-id”の値を取得
    e.preventDefault(); //画面の遷移を止める
    $.ajax({
      type: 'GET',
      url: '/works/' + $workId, // アクションを投げるURL
      data: { id: $workId },
      dataType: 'json'  //json形式指定
      })
      .done(function (data) {
        var showWork = buildHtml(data); // buildHtml関数を呼び出す
        $modal.empty(); // #modal の中身は一度空に
        $modal.append(showWork); // #modalの中にビルドしたHTMLを入れる
      })
      .fail(function (){
        console.log("失敗しました");
      });
  });
});

이상, 스쿨에서는 흩어져 고생한 ajax입니다만, 어떻게든 자력으로 실장할 수 있게 되었습니다. 다음은 「좋다!」기능도 붙여 post 메소드로 시험하고 싶습니다.

▼전반적으로 이 기사를 참고로 했습니다.
【Rails에서 비동기 통신】Rails에서 Ajax를 이용할 때 jQuery를 사용하는 방법

▼그 후, 완전히 다른 형태입니다만, Ajax의 좋아요! 기능도 만들었으므로 소개합니다.
Rails에서 Ajax에서 "좋아요!"기능을 구현합니다.