Ajax 통신을 통해 주석 삭제

Ajax를 사용하여 주석 삭제 기능을 실행할 때 몇 개의 막힌 부분이 있기 때문에 기록으로 보존합니다.
구현 이미지는 다음과 같습니다.

막힌 곳은 아래 2시.
1. 주석을 끼워 넣는 삭제 방법(파라미터가 어떻게 전달되는지)
2.js.erb 파일의 기술 방법
이 두 가지에 관한 해결 방법을 기술하다.스케줄러:전에 자기가 한 일을 해결하는것도적어놓기 때문에 길어진다.
환경은 다음과 같습니다.
ruby 2.6.5
Ruby on Rails 6.0.3.3

1. 주석을 끼워 넣는 삭제 방법(파라미터가 어떻게 전달되는지)

먼저 동기화 통신에서 삭제할 수 있도록 설치했는데 갑자기 넘어졌어요.플러그인 기능이 삭제되지 않았기 때문입니다. (이번에는 주석 기능입니다.)
어쨌든 매개 변수를 어떻게 하면 좋을지 생각해서 다음과 같은 일을 했습니다.
① 댓글 ID 제출
나는 단순히 댓글의 아이디를 주고 어떤 동작이 될지 확인했다.

  <% @comments.reverse.each do |comment| %>
    <div class="comment">
        <%=link_to image_tag("delete.png", class: "delete-btn"), laundry_comment_path(comment.id), method: :delete %>
      (略)
    </div>

결실

나는 욕을 먹어서 평론이 없다.실제 데이터베이스를 확인한 후 id=11의 댓글이 없습니다.
기발한 생각.pry를 통해 확인한 결과, 왠지 가게 아이디와 댓글의 아이디가 거꾸로 전달됐다.
(원래 laundry id는 11이고, id(평론의 id)는 123이어야 한다.)
왜 이렇게 됐는지 모르겠지만 다른 방법부터 생각해 볼게요.
※ 결과는 아직 불분명하다.아는 거 있으면 알려주세요.
② 인스턴스 변수 제출
인터넷 검색에서 다음과 같은 Qita 기사가 발견됐다.
[Rails] 네스트된 주석 삭제 생성
바로 내가 찾던 것이다!그래서 즉각 실천한다.

 <%=link_to image_tag("delete.png", class: "delete-btn"), laundry_comment_path(@laundry,comment.id), method: :delete %>

매개변수는 @laundry,comment입니다.@laundry 컨트롤러에 의해 정의됩니다.)
시행을 시도했지만 오류가 발생해 제대로 진행되지 못했다.(또 하나의 의문은 원래 블록 변수를 사용하는 공식에 실례 변수를 사용했는가?)
여기에 끼워 넣을 때 두 개의 매개 변수를 교차해야 한다는 것을 발견하고 경로를 확인했는데 결과/laundries/:laundry_id/comments/:id였다.
평소:id의 부분을 이해하기 위해 파라미터를 냈는데, 이번에도 laundry입니다.id와 댓글의 id는 전달할 수 있기 때문에 블록 변수comment부터laundryid를 전달하기 위해 다음과 같은 매개 변수를 지정하여 해결했습니다.

해결책

<%=link_to image_tag("delete.png", class: "delete-btn"), laundry_comment_path(comment.laundry_id, comment.id), method: :delete  %>

나는 끼워 넣어도 기본적으로 같고 어디로 가는 경로가 있는지 배웠고 그것을 위해 어떤 파라미터를 판단해야 하는지 배웠다.

2.js.erb 파일의 기술 방법

동기 통신을 실현했기 때문에, 이어서 비동기적인 실현에 착수할 것이다.
기본적으로 link_to에 추가remote: true된 옵션을 통해 비동기 통신을 실행하여 hoge를 진행한다.js.erb 파일 (이번은destroy.js.}) 을 찾아서 렌더링하는 절차입니다.destroy.js.html.js.erb의 기술 때문에 또 걸려 넘어졌다.
원본eb 파일 js를 기술한 적이 없기 때문입니다.erb 파일은?여기서부터 시작했지만 요점을 정리하면 다음과 같은 느낌이 든다.
· js(ajax) 요청을 했을 때 재현된 파일입니다.
・Javascript를 사용하여 기술할 수 있습니다.
· ERB의 기법을 사용할 수 있음(<%=> 또는 <%>)
자바스크립트를 사용할 수 있는지 생각하면서 기능과 관련된 js를 삭제합니다.eb 파일의 쓰기 방법 등을 조사할 때 모두 jQuery로 썼다고 할 수 있다.
나는 기술량이 그렇게 많지 않다고 생각해서 평소의 자바스크립트를 사용해 보려고 자바스크립트로 기술하기로 결정했다.

const commentArea = document.getElementById('comment-area');
commentArea.innerHTML = "<%= render partial: 'index', locals: { comments: @comments } %>";

한 마디로 하면 필요한 요소를 먼저 얻은 다음에render로 일부 템플릿을 끼워 넣으면 OK인 것 같아서 이렇게 기술하고 실행했다.
결실Uncaught SyntaxError: Unexpected identifier 오류가 표시됩니다.
해당 장소를 확인한 결과 다음과 같이 표시됩니다.

큰따옴표의 잘못된 내용이 큰따옴표라서 문법이 잘못된 거죠?이렇게 지적하고 수정했지만 같은 오류가 발생했습니다.

해결책

`<%= render partial: 'index', locals: { comments: @comments } %>`;

가방에 싸서 해결했어요.
일시적으로 삭제할 수 있지만 다음에는 한 번만 삭제할 수 있는 현상(읽지 않고 다른 댓글을 삭제할 때 오류 표시)이 발생했다.

const commentArea = document.getElementById('comment-area');
commentArea.innerHTML = `<%= render partial: 'index', locals: { comments: @comments } %>`;

Identifier 'commentArea' has already been declared commentArea 발표가 됐기 때문에 "상수라서 한 번만 선언할 수 있는 건가"라며 const→let으로 변경했다.

let commentArea = document.getElementById('comment-area');
commentArea.innerHTML = `<%= render partial: 'index', locals: { comments: @comments } %>`;

변경 후 실행을 시도했지만 다시 같은 오류가 발생했습니다.
상수가 멈췄는데 왜일까라고 생각하지만 확실히 let을 사용하는 건 변수를 정의할 때 값을 변경할 때 let을 사용하지 않는 거죠. 그래서 let을 삭제합니다.

commentArea = document.getElementById('comment-area');
commentArea.innerHTML = `<%= render partial: 'index', locals: { comments: @comments } %>`;

///이것은 이미 두 줄로 나눌 필요가 없어서 하나로 총결산하여 마침내 실현되었다.

document.getElementById('comment-area').innerHTML = `
<%= render partial: 'index', locals: { comments: @comments } %>`;

먼 길을 돌아간 기분이지만 이뤄질 수 있다는 게 정말 안심되는 느낌이에요.
하지만 완성 단계에서는 전혀 이해가 되지 않기 때문에 이해를 깊게 해야 한다!